User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:60.0) Gecko/20100101 Firefox/60.0 Build ID: 20180308100121 Steps to reproduce: I contribute to the Invert Colors [0][1] web extension which applies body { filter: invert(100%); } On some web-pages instead of the expected inversion of colors entire areas of the page are moved off-screen and become effectively invisible. So far I've found two scenarios: 1) Loading an image via direct URI (no wrapping HTML) 2) Visiting a Nextcloud 13 page (demo at https://demo.nextcloud.com/ ) [0] https://github.com/Max-Github/FireFoxInvertColors [1] https://addons.mozilla.org/en-US/firefox/addon/invert-colors/ Actual results: When Invert is activated in a tab using a direct link to an image (e.g: http://localhost/test.jpg ) the image position changes so that the image seems to shift it's 'top' up by half the image height. This results in only the lower half of the image being visible. Through experimenting I found that FF wraps the image in HTML which links to internal stylesheet resource://content-accessible/TopLevelImageDocument.css which contains: img { text-align: center; position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; } Disabling 'bottom' or changing it to 'inherit' solves the problem For the Nextcloud 13 issue we found that one of the content areas 'div id=content-wrapper" ' has the CSS: #content-wrapper { position:absolute; height:100%; width:100%; overflow-x:hidden; padding-top:45px; box-sizing:border-box } Disabling either of position or height makes content visible. In some experiments disabling overflow-x also made content visible. Expected results: Position of elements shouldn't be affected by invert().

Related specification issue [0] and FF fix tracking bug [1]. [0]https://github.com/w3c/fxtf-drafts/issues/11 [1] https://bugzilla.mozilla.org/show_bug.cgi?id=1423746

Could you please provide a file to use as an example here?

[Triage 2018/03/23 - P3]