Open Bug 1258421 Opened 4 years ago Updated 2 years ago
css filter with absolute positioned or large elements hides the container
To reproduce this bug apply any css filter, like "filter: invert(100%)" to an container, like the body, containing an element with: position: absolute; left: -9999999px; /* Can be less... */ Result: body is not displayed. Expected result: body should be displayed inverted. Quick test with: www.facebook.com 1. Use the Inspector to add "filter: invert(100%)" to the body. => body is not displayed anymore (I traced the bug down to one element:) 2. Search for i.img u. 3. Disable css rule "left: -999999px" or remove one 9. => body is correctly display inverted. See also the attached example. Another site is google (occurs only occasionally): 1. Search for any pictures (picture tab). 2. Apply "filter: invert(100%)" to the body. 3. If Element "#rg" has a very large height (after scrolling down probably), the body vanishes. Encountered this problem while writing/testing a global "invert" style with the Stylish addon.
Summary: css filter with absolute positioned or large elements → css filter with absolute positioned or large elements hides the container
http://codepen.io/anon/pen/xVmEVg?editors=1000 => should see a grayscale Spongebob, not a red background.
Additionally, elements can be shown at different positions, like on http://www.robvanderwoude.com/find.php With "filter: invert(100%)" on the body, the menu is shifted from the absolute coordinates (top,left) = (0,0), showing it on the margin of <body>, into the body, ignoring the margin.
Related (possible duplicate): bug 1299754
Based on bug 1299754 comment 7, it is a regression from bug 1125767.
Marking this fix-optional for 51/52. Looks like a longstanding regression (from 39). Jet is this something you want to aim to fix for 53?
(In reply to Liz Henry (:lizzard) (needinfo? me) from comment #6) > Marking this fix-optional for 51/52. Looks like a longstanding regression > (from 39). > Jet is this something you want to aim to fix for 53? (In reply to zash from comment #0) > 3. Disable css rule "left: -999999px" or remove one 9. > => body is correctly display inverted. This is a valid bug, though translating elements that far off the viewport, then applying CSS filters using an add-on, seems very edge-case.
Is this bug fixed? In the current version, Firefox Quantum v57, I cannot reproduce the bug anymore, at least not on the test page or other pages with a large offset element (like "left: -999999px"). Remark: I did not test this in earlier Firefox versions and cannot say if any of the related bugs still apply!
Can anyone confirm this? Then this bug can be closed (fixed).
You need to log in before you can comment on or make changes to this bug.