javascript - 当可滚动框位于具有不透明度和高度的元素顶部时，Firefox 不会重新绘制

Question

这可能是我在多年的网站编码工作中遇到的最奇怪的事情，所以我想我应该让一些比我聪明得多的人来运行它来解释为什么会发生这种情况。如果没有解释，我可能会将其作为错误报告提交。我花了很长时间才真正找出问题的原因。

我只能在 Firefox(当前版本 15，也许还有其他版本)中产生以下行为。在 Internet Explorer、Chrome 或 Safari 中不存在问题。很难解释，我只是在这里创建了一个演示:http://sandbox.uatu.net/dom-changes.php

一般的想法是，在一组非常特定的条件下，当滚动可滚动框时，DOM 更改会被 Firefox 阻止，无论滚动是由用户完成的还是由脚本自动完成的。这是设置:

<div id="superContainer">
   <div id="subContainer">
       <div id="mainPage">
           scrollable box in here
       </div>
   </div>
</div>

重要属性:

• superContainer 有高度和宽度尺寸

• 子容器有高度尺寸

• subContainer 的不透明度设置小于 1

• 子容器有背景色

• mainPage 有一个绝对位置属性

无论如何，如果您访问该演示页面，您会看到尝试滚动该框会卡住所有页面动画。实际上，您可以在 Firebug 中观察其中一些元素，并看到属性在实时变化，但 Firefox 只是拒绝重新绘制页面上的任何内容。

如果您将这些属性中的任何一个切换到关闭位置，一切都很好。正是这种特殊的设置组合似乎产生了问题。

有人知道为什么吗？我无法告诉你这让我有多疯狂——我基本上整个周末都在排除故障，在我发现它的网站上完全重构我的代码。

Answer 1

在我看来，不透明度 + 绝对位置是这里的罪魁祸首，请阅读有关透明度的 w3 规范以了解引擎如何渲染和威胁不透明度。

http://www.w3.org/TR/css3-color/#transparency

Since an element with opacity less than 1 is composited from a single offscreen image, content outside of it cannot be layered in z-order between pieces of content inside of it. For the same reason, implementations must create a new stacking context for any element with opacity less than 1. If an element with opacity less than 1 is not positioned, implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’. If an element with opacity less than 1 is positioned, the ‘z-index’ property applies as described in [CSS21], except that ‘auto’ is treated as ‘0’ since a new stacking context is always created. See section 9.9 and Appendix E of [CSS21] for more information on stacking contexts. The rules in this paragraph do not apply to SVG elements, since SVG has its own rendering model ([SVG11], Chapter 3).

如果您从#mainPage 中删除 position: absolute，您会注意到该错误已消失，您可能仍想提交该错误，并为您的实现考虑一个 B 计划。