更改位置时的 Safari 渲染问题：固定到位置：相对

Posted 2023-03-11

【中文标题】更改位置时的 Safari 渲染问题：固定到位置：相对

【英文标题】：Safari rendering issue when changing position:fixed to position:relative

【发布时间】：2014-03-27 16:07:02

【问题描述】：

我正在开发一个 jQuery 插件，只是为了好玩，当您向下滚动页面时，它会显示“堆栈”中的元素。

Github 仓库在这里 - https://github.com/JayBizzle/Reveal

演示在这里 - http://jaybizzle.github.io/Reveal/

在 Chrome 中一切正常，但在 Safari 中进行测试时，我发现了一些奇怪的渲染问题。

如果您在 Safari 中查看演示并快速向下滚动，您会注意到彩色 DIV 之间出现白色间隙。

更奇怪的是，如果您随后检查其中一个位置不正确的 DIV，检查器会在正确位置突出显示该 DIV。此外，如果您在检查器中更改了其中一个元素的 CSS 属性，例如添加边框，页面将被重绘并且元素出现在正确的位置。

如果这是一个 Safari 错误，或者我可以用一些鲜为人知的 CSS 解决什么问题，有人知道吗？

【问题讨论】：

是的，虽然我注意到它在 FireFox 中可能没有那么糟糕。很奇怪的bug虽然

我要做的是延迟scroll和resize事件的执行，直到它们像jsfiddle.net/nRCX9一样完成

看看如果事件没有延迟（滚动窗口）jsfiddle.net/wR5j4 以及它们何时为jsfiddle.net/wR5j4/1 会发生什么

【参考方案1】：

我遇到了类似的问题。 我的解决方法是先给出静态位置，然后稍微延迟一些相对位置。

    $(elem).css('position', 'static');
    setTimeout(function() 
      $(elem).css('position', 'relative');
    , 1);