Çok, çok, çok büyük bir div

SORU

8 Aralık 2014, PAZARTESİ

Çok, çok, çok büyük bir div

Benim bir proje için (BigPicture.bi bigpicture.js GitHub project), çok, çok, çok büyük <div> çok potansiyel bir kap ile uğraşmak zorunda.

Ben kullanımı basit yaklaşım ile düşük performans riski olduğunu biliyordum, ama ... sadece çoğunlukla mevcut Krom olmasını beklemiyordum!

Eğer this small page (kod aşağıda) sınamak, panning (tıklayın ve sürükleyin):

Normal / Firefox sorunsuz
Normal, hatta Internet Explorer üzerinde pürüzsüz
Çok yavaş (neredeyse kırılma sesi) Krom!

Tabii ki, çok Yakınlaştırılmış olduğunuzda, potansiyel olarak çok çok büyük yazı tipi boyutu ile metin gizlenecek yapmak için bazı kod (projemde) ekleyebilirim. Ama yine deneden Firefox ve Internet Explorer düzgün bir şekilde işler ve Krom mu?

JavaScript bir şekilde, tarayıcı anlatmak için HTML ya da CSS vardenemek için değilişlemek için her eylem için tüm sayfayı 10000 piksel geniş olan)?(yalnızca geçerli görünüm penceresi render!)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            html, body {
                overflow: hidden;
                min-height: 100%; }

            #container {
                position: absolute;
                min-height: 100%;
                min-width: 100%; }

            .text {
                font-family: "Arial";
                position: absolute;
            }
        </style>
    </head>

    <body>
        <div id="container">
            <div class="text" style="font-size: 600px; left:100px; top:100px">Small text</div>
            <div class="text" style="font-size: 600000px; left:10000px; top:10000px">Very big text</div>
        </div>

        <script>
            var container = document.getElementById('container'), dragging = false, previousmouse;
            container.x = 0; container.y = 0;

            window.onmousedown = function(e) { dragging = true; previousmouse = {x: e.pageX, y: e.pageY}; }

            window.onmouseup = function() { dragging = false; }

            window.ondragstart = function(e) { e.preventDefault(); }

            window.onmousemove = function(e) {
                if (dragging) {
                    container.x  = e.pageX - previousmouse.x; container.y  = e.pageY - previousmouse.y;
                    container.style.left = container.x   'px'; container.style.top = container.y   'px';
                    previousmouse = {x: e.pageX, y: e.pageY};
                }
            }
        </script>
    </body>
</html>