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

RESOLVED INVALID

Status

()

RESOLVED INVALID
2 years ago
2 years ago

People

(Reporter: BenWa, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

2 years ago
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.
(Reporter)

Comment 1

2 years ago
Created attachment 8732961 [details]
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
Last Resolved: 2 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.