User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Safari/537.36

Steps to reproduce:

Have in a extension like Stylus the following CSS Snippet

html {
    filter: invert(100%) hue-rotate(180deg) !important;
}
img {
    filter: invert(100%) hue-rotate(180deg) !important;
}

• Go to a full image path e.g. https://images.unsplash.com/photo-1535332371349-a5d229f49cb5?ixlib=rb-1.2.1&w=1000&q=80

Actual results:

The image is rendered halfup the viewport

Expected results:

The image should be in vertical allign just like always.

Wrong image was submitted should be: https://i.imgur.com/ObLJi9W.png

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Can you try without the rule for html?

https://i.imgur.com/svcfrXF.png Just them html rule same behaviour but just inverted actually.

With just the img rule you get correct behaviour https://i.imgur.com/RAebI7N.png

Hello,

I’ve managed to reproduce the issue following the provided STR on the latest Nightly (80.0a1/20200723212842), Beta (79.0/20200720193547) and Release (78.0.2/20200708170202) under Windows 10 Pro 64-bit and Ubuntu 16.04 LTS.

Applying the mentioned CSS rules will cause the reference image to be half rendered as originally reported.
However, on image hover, magnifying becomes available. Clicking the image will fully display it under these circumstances.
Furthermore, leaving out the html { filter: invert(100%) hue-rotate(180deg) !important;} part of the CSS rule will properly and fully display the image (with inverted colors).

I’ve also run a bisection (from 01-01-2018 up to the present day), but all tested builds appear to be affected by the issue. The results show that it probably isn’t a regression and that it was always like this.

This has nothing to do with extensions. According to the spec, any non-none filter value results in the creation of a new stacking context. Using position:relative instead of filter has the same result.

Minimal STR is data:text/html,<img src="https://www.bingwallpaperhd.com/wp-content/uploads/2018/12/CologneDom.jpg"><style>html{filter:grayscale(0)}img{position:absolute;top:0;left:0;bottom:0;right:0;margin:auto}</style>
(resize window and/or zoom in if needed)

In Chromium 86.0.4216.0 I see that the image is centered (vertically & horizontally).
In Firefox, the image is horizontally centered, but it is not vertically centered. In fact the element is shifted too far to the top, beyond the top of the page. If I remove margin:auto or replace position:absolute (with fixed,relative,sticky), the issue does not occur. If I add html{height:100%}, the expected result occurs too.

I don't know if this is a bug or intentional, moving over to Layout for them to decide.

I hope that the new title makes some sense.

Seems to make sense, for someone knowing the internals.
Also I wanted to point out that some of the rules like adding html { height:100%} could case to scale up smaller images.
Also I should be surprised if this was intentional, as this bug report was for a bug report by us.

This is only bug 1423746, which is a spec change which we need to implement. Right now filter on the root is not special but it should per spec.