Closed Bug 1258461 Opened 8 years ago Closed 8 years ago

applying CSS filter to body element causes parts of the page outside of body's box to disappear

Categories

(Core :: Layout, defect)

defect
Not set
normal

Tracking

()

RESOLVED INVALID

People

(Reporter: BenWa, Unassigned)

Details

Attachments

(1 file)

STR:
1) Go to gitlab.com
2) Run |document.body.style.filter="invert(75%)"| either using devtools or a bookmarklet

The page will shrink unexpectedly. It's not clear if it's a gotcha in the spec or not.
Attached image bugzillabug2.gif
Summary: document.body.style.filter="invert(75%)" bookmarlet causes the page to shrink → applying CSS filter to body element causes parts of the page outside of body's box to disappear
I think this is per spec. Bug 1125767 made filters act as a containing block for position:fixed descendants, and the sidebar on gitlab has position: fixed; top: 0; bottom: 0;. It's expected that it changes its height to match the body's height if the body gets a filter.

I suggest using
html { filter: invert(75%); height: 100%; }
instead.
Status: NEW → RESOLVED
Closed: 8 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: