Firefox doesn't repaint when a scrollable box sits on top of an element with opacity and height

Question

This is probably the most bizarre thing that I came across during the years of coding a website, so I thought that I would launch it with some people who are smarter than me to try to explain why this is happening. If there is no explanation, I'm probably going to present it as an error report. It took me forever to actually solve the cause of the problem.

The following behavior, which I can only produce in Firefox (version 15, currently and possibly some others). No problem in Internet Explorer, Chrome or Safari. It's so hard for me to explain that I just created a demo here: http://sandbox.uatu.net/dom-changes.php

The general idea is that with a very specific set of conditions, DOM changes are delayed by Firefox when the scroll window scrolls, regardless of whether the user scrolls or is automated using a script. Here's the setting:

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

Important attributes:

• superContainer measures height and width

• subContainer has a height size

• subContainer has an opacity parameter of less than 1

• subContainer has background color

• mainPage has a position absolute attribute

In any case, what you see if you visit this demo page is that an attempt to scroll the window hangs in all page animations. In fact, you can observe some of these elements in Firebug and see that the properties change in real time, but Firefox simply refuses to redraw anything on the page.

If you switch any of these attributes to the off position, everything will be fine. This is precisely this combination of settings that seems to be creating the problem.

Does anyone have any thoughts on why? I can’t tell you how this embarrassed me - I basically looked for the whole weekend, completely reviewing my code on the site where I found it.

Answer 1

It seems to me that absolute opacity + absolute essence is here, read the w3 specs on transparency to understand how engine rendering and opacity are threats.

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

Since an element with an opacity of less than 1 is composed of a single off-screen image, content outside it cannot be stacked in z-order between pieces of content inside it. For the same reason, implementations should 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 should draw the layer that it creates in the context of the parent stack in the same stacking order as will be used if it was a positioned element with 'z-index: 0 and' Opacity: 1. If an element with opacity less than 1, the z-index property is applied as described in [CSS21] , except that 'Auto is processed like '0 because the new context is stackers A code is always created See Section 9.9 and Appendix E [CSS21] for more information on stacking contexts The rules in this clause do not apply to SVG elements because SVG has its own rendering model ( [SVG11] , Chapter 3).

If you remove the position: absolute from #mainPage, you will notice that the error has disappeared, you might want to write down the error anyway and think about Plan B. for your implementation.