1041179 - content OBJECT element is shown above position:fixed chrome elements that have a clip-path or are undergoing a CSS animation

Status: NEW

(Core :: Layout, defect)

Description

[Luís Miguel [:quicksaver] (not reading bugmail)]

STR:
1) Go to https://addons.mozilla.org/firefox/addon/the-fox-only-better/ and install the latest beta version (currently 1.1b6) in the development channel
2) Go to http://www.courrierinternational.com/article/2014/06/25/pourquoi-suarez-a-t-il-mordu-le-defenseur-italien and scroll down to the embedded flash video object around the middle of the page
3) The chrome will appear like in this screenshot: https://cloud.githubusercontent.com/assets/5566160/3435914/a0b60848-009a-11e4-9bfc-bdffc6c6ff18.png

Basically, I'm setting position:fixed on a container with the top chrome toolbars, so they appear above the content. But certain nodes like the video on this page are rendered above it. I am clueless about what's happening, my guess is because the video comes later in the DOM tree, somehow its rendering engine stays above anything that comes before it.

If there's anything I could do on the add-ons side about this, please let me know. Like I said, I'm clueless.

I've also seen a screenshot of this happening in youtube, although I can't reproduce that one myself, but I'm almost sure it has the same cause.

Comment 1

[Luís Miguel [:quicksaver] (not reading bugmail)]

Even worse is trying to view this video, for example with the VLC plugin: http://people.mech.kuleuven.be/~rsmits/filmpjes/Track3_3d.mpeg

The toolbars almost don't seem like they show at all, because the video covers them completely.

Comment 2

[Luís Miguel [:quicksaver] (not reading bugmail)]

Apparently the problem only happens when the position:fixed 'd node has a clip-path applied, or is undergoing any CSS animation at the time.

As an easy test, install the latest release version of The Fox, Only Better at https://addons.mozilla.org/firefox/addon/the-fox-only-better/. By default, the Australis style is applied, and the toolbars will be hidden under the media object (same STR as in comment 0). But if you change the style to any other (Australis is the only one that has a clip-path) in the add-on's preferences window, the toolbars will be displayed correctly above it.

Also, with the other styles, you can see that during the animation the toolbars are also behind the media object. You can confirm that the problem is also with the animation because if you change the corresponding option to "No animation", this won't happen anymore. Should this go on its separate bug?

Comment 3

[Luís Miguel [:quicksaver] (not reading bugmail)]

Please note that this is not restricted to flash objects, those are just an example. Other examples are any Java applet, or even tabs rendered with the IE engine through the FireIE add-on. Pretty much anything that's rendered by some sort of engine outside of firefox itself (like plugins) will probably cause this also.

Comment 4

[Luís Miguel [:quicksaver] (not reading bugmail)]

Attachment: Chrome under Flash object

Updated info to reproduce the problem:

Latest add-on version with the problem is 1.1.3: https://addons.mozilla.org/en-US/firefox/addon/the-fox-only-better/versions/1.1.3.1-signed
Example URL to problematic site: https://www.dhs.state.il.us/accessibility/tests/flash/video.html

You'll have to resize the window and scroll the website so that the flash object is just under the toolbars to see the problem, as in the attached screenshot.

This only happens in non-e10s mode. In e10s mode, or with a more recent version of the add-on, the problem becomes bug 1202728.