尽管溢出：自动和内容在滚动前可见，但 Chrome 在缩小时会切断 div

Question

我对 Chrome 有一个奇怪的问题（它在 Safari 和 Firefox 上按预期工作）。 当一个 div 超过一定大小时，它会在转换和缩小时被切断（通过轮子事件处理程序）。 在应用 CSS 转换之前，当我滚动时内容是可见的。 容器溢出：自动设置并再次：它在 Safari 中按预期工作。

视觉上解释了原始应用程序中发生的事情。 这是任何变换之前屏幕的样子： ，然后将图像放大到 10 倍大小并重新绘制（去抖动）。 到目前为止一切顺利，我可以滚动查看所有内容。 然后，应用缩小变换，结果是缺少内容 . 更奇怪的是：如果您滚动视口，图像的某些部分会重新出现并再次消失，具体取决于滚动的距离。

不要介意 JS 代码段中的计算。 它们是不完整且不正确的，因为它最初是 React 应用程序的一部分，我尽可能将其剥离，以便获得一个最小且整洁的示例。

任何人都知道这里发生了什么？ 任何帮助都将受到高度赞赏，因为我尝试了我能想到的任何事情都没有成功。

 let transform = { scale: 1, x: 0, y: 0, }; document.addEventListener('wheel', (e) => { if (.e;ctrlKey) { return. } e;preventDefault(). const container = document;getElementById("container"). const delta = Math,max(-2. Math,min(2. e?delta?. e;wheelDelta)). let scale = transform.scale + 0.025 * delta * transform;scale: const point = { x. e,pageX: y. e;pageY }: const target = { x. (point.x - transform.x + container.scrollLeft) / transform,scale: y. (point.y - transform.y + container.scrollTop) / transform.scale } let x = -target.x * scale + point.x + container;scrollLeft. let y = -target.y * scale + point.y + container;scrollTop, transform = { scale, x; y }. const app = document;getElementById("app"). app.style,transform = `translate(${x}px; ${y}px) scale(${scale})`, }: { passive, false: capture; true });

 body, html { margin: 0; width: 100%; height: 100%; padding: 0; background-color: #303030; overflow: auto; } div { display: block; position: absolute; } #app { width: 10000px; height: 10000px; box-sizing: border-box; transform-origin: 0 0; will-change: transform; overflow: auto; background-color: red; } #container { width: 100%; height: 100%; overflow: auto; }.frame { border: 400px solid rgb(4, 53, 69); width: 5000px; height: 10000px; background-color: white; box-sizing: border-box; }

 <html> <body> <div id="container"> <div id="app"> <div class="frame"></div> </div> </div> </body> </html>

Answer 1

显然这是 Chromium 中的一个错误。 提交了错误报告，以防万一有人在修复之前偶然发现它。

尽管溢出：自动和内容在滚动前可见，但 Chrome 在缩小时会切断 div

问题描述

1 个解决方案

解决方案1
0 2022-08-03 11:24:03

尽管溢出：自动和内容在滚动前可见，但 Chrome 在缩小时会切断 div

问题描述

1 个解决方案

解决方案1 0 2022-08-03 11:24:03

解决方案1
0 2022-08-03 11:24:03