Pour un de mes projets (voir BigPictu.re ou bigpicture.js GitHub project ), je dois gérer potentiellement un très, très, très gros <div>conteneur.
Je savais qu'il y avait un risque de mauvaises performances avec l'approche simple que j'utilise, mais je ne m'attendais pas à ce qu'elle soit principalement présente avec ... Chrome uniquement!
Si vous testez cette petite page (voir code ci-dessous), le panoramique (clic + glisser) sera:
- Normal / lisse sur Firefox
- Normal / lisse même sur Internet Explorer
- Très lent (presque planter) sur Chrome!
Bien sûr, je pourrais ajouter du code (dans mon projet) pour le faire lorsque vous zoomez beaucoup, le texte avec une taille de police potentiellement très grande serait masqué. Mais quand même, pourquoi Firefox et Internet Explorer le gèrent-ils correctement et non Chrome?
Existe-t-il un moyen en JavaScript, HTML ou CSS de dire au navigateur de ne pas essayer de rendre la page entière (qui fait ici 10000 pixels de large) pour chaque action? (ne rendre que la fenêtre courante!)
<!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>