Menu
For a project of mine (see BigPictu.re or bigpicture.js GitHub project), I have to deal with potentially a very, very, very big <div> container.
I knew there was a risk of poor performance with the simple approach I use, but I did not expect it to be mostly present with ... Chrome only!
If you test this small page (see code below), panning (click + drag) will be:
Of course, I could add some code (in my project) to do that when you're zoomed in a lot, text with potentially very very big font-size would be hidden. But still, why does Firefox and Internet Explorer handle it correctly and not Chrome?
Is there a way in JavaScript, HTML, or CSS to tell the browser not to try to render the whole page (which is 10000 pixels wide here) for every action? (only render the current viewport!)
<!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> 
646
The <div> tag defines a division or a section in an HTML document. The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript. The <div> tag is easily styled by using the class or id attribute. Any sort of content can be put inside the <div> tag!
A div's height depends on its inner elements, in your example, the first input is having a height of 100px, so the div will have at least 100px height, ignoring spacing, boarder, padding. Setting max-height on the div will hint the rendering engine to limit the height, but doesn't necessarily work all the time.
<div>: The Content Division element. The <div> HTML element is the generic container for flow content.
Changing to position: fixed seems to speed things up.
113
Use transform instead of top/left:
container.style.transform = 'translate(' + container.x + 'px, ' + container.y + 'px)'; A live demo at jsFiddle.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
