私のプロジェクト（BigPictu.reまたはbigpicture.js GitHubプロジェクトを参照）の場合、非常に大きな、非常に大きな<div>コンテナに対処する必要があります。
私が使用する単純なアプローチではパフォーマンスが低下するリスクがあることは知っていましたが、それがほとんど存在することを期待していませんでした... Chromeのみ！
この小さなページをテストすると（以下のコードを参照）、パン（クリック+ドラッグ）は次のようになります。
- Firefoxで通常/スムーズ
- Internet Explorerでも正常/スムーズ
- Chromeでは非常に遅い（ほとんどクラッシュする）。
もちろん、（プロジェクトに）コードを追加して、ズームインすると、フォントサイズが非常に大きくなる可能性のあるテキストが非表示になります。それでも、なぜFirefoxとInternet ExplorerはChromeではなく正しく処理するのですか？
JavaScript、HTML、またはCSSで、すべてのアクションに対してページ全体（ここでは幅10000ピクセル）をレンダリングしないようにブラウザに指示する方法はありますか？（現在のビューポートのみをレンダリングします！）
<!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>
54
[OT] 600Kフォントサイズ。視力が非常に悪い人のためのアクセシビリティ機能でなければなりませんか？;-)
—
geert3 2014
@ geert3これは月周回ウェブブラウザ用だと思います
—
David Wilkins 14
Chrome 41.0.2236.0 dev-mでのデモはスムーズです
—
Pier-Luc Gendreau 2014
私はカナリア（41.0.2241.0カナリア）にいますが、まだ遅延が発生しています。
—
ゲームリグで
一般的な考えに反して、IEはほとんどのページをレンダリングするために実際にはChromeよりも高速です。ただし、JavaScriptエンジンは少し遅いです。
—
Falanwe