Open Bug 1258421 Opened 4 years ago Updated 2 years ago

css filter with absolute positioned or large elements hides the container

Categories

(Core :: Layout, defect, P5)

39 Branch
defect

Tracking

()

Tracking Status
firefox50 --- wontfix
firefox51 --- wontfix
firefox52 --- wontfix
firefox53 --- fix-optional

People

(Reporter: zash, Unassigned)

References

Details

(Keywords: regression, reproducible, testcase)

Attachments

(1 file)

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.
Keywords: css-moz
Summary: css filter with absolute positioned or large elements → css filter with absolute positioned or large elements hides the container
Status: UNCONFIRMED → NEW
Component: General → Layout
Ever confirmed: true
OS: Windows 10 → All
Product: Firefox → Core
Hardware: x86_64 → All
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
See Also: → 1299754
Duplicate of this bug: 1299754
Based on bug 1299754 comment 7, it is a regression from bug 1125767.
Blocks: 1125767
Keywords: regression
Version: 45 Branch → 39 Branch
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.