【问题标题】:Potential CSS Scroll Snap bug in ChromeChrome 中潜在的 CSS Scroll Snap 错误
【发布时间】:2021-05-26 17:38:18
【问题描述】:

请检查此代码笔,那里描述了问题。还有一个demo。
https://codepen.io/NeXTs/pen/abBwXVw

// snippet of code required by stackoverflow to post a question
slider.addEventListener("scroll", _.debounce((e) => {
    const currentHeight = parseFloat(e.target.style["height"]);
    e.target.style["height"] = currentHeight + (flag ? 5 : -5) + "px";
    flag = !flag;
}, 50));

我已经在 Mac 和 Windows 上测试过了。

Chrome 中的相同行为(在 Mac 和 Windows 上)
同时其他浏览器(甚至是 webkit 上的 Safari 和 Opera)也不会立即跳转到最近的快照点。

这是一个错误?
如果是这样,我可以报告它的正确位置是什么?或者我可以在哪里询问它的正确位置(与 webkit 相关)?

【问题讨论】:

  • 确认它正在发生,但是我发现大多数这些奇怪的问题都有一个合乎逻辑的解释,实际上并不是错误。不过我会环顾四周。我有类似的东西,但不完全是这个。
  • 仅供参考 Chromium 衍生浏览器(包括 Opera)使用 Blink,它是 WebKit 的一个分支,但绝对不一样。
  • @Denis 对不起,我不明白你的确切问题?当我离开鼠标单击时,框会自动向左或向右移动以将框与容器对齐。是这个问题还是别的什么?
  • @AbhilashAugustine,如果你打开检查器,打开响应模式,然后慢慢拖动滑块,你会看到它反弹回来重新开始。

标签: javascript css google-chrome scroll-snap


【解决方案1】:

“Chrome 在 M81 中布局更改后引入了自动对齐功能 (https://web.dev/snap-after-layout/)。”

https://bugs.chromium.org/p/chromium/issues/detail?id=1181843#c8

不幸的是,这种行为在 Chrome 中是故意的。

【讨论】:

  • 为什么在响应模式下仍然会出现这种情况?
  • ¯\_(ツ)_/¯
猜你喜欢
  • 1970-01-01
  • 2021-11-13
  • 1970-01-01
  • 1970-01-01
  • 2021-06-25
  • 1970-01-01
  • 1970-01-01
  • 2019-10-14
  • 2013-04-17
相关资源
最近更新 更多