Closed Bug 1335860 Opened 7 years ago Closed 5 years ago

Applying a style sheet with a "filter" property to an image opened in browser causes it to move up

Categories

(DevTools :: Style Editor, defect, P3)

Product:
DevTools
Component:
Style Editor
Version:
51 Branch
Type:
defect

Tracking

(Not tracked)

Status:
RESOLVED DUPLICATE of bug 1259924

People

(Reporter: regspam, Unassigned)

Details

User Agent: Mozilla/5.0 (Windows NT 6.0; rv:51.0) Gecko/20100101 Firefox/51.0
Build ID: 20170125094131

Steps to reproduce:

1. Open an image file, let it be https://bugzilla.mozilla.org/skins/contrib/Mozilla/tabzilla.png for example.
2. In StyleSheet Editor (Shift-F7) click "Import and append an existing style sheet to the document" icon, and open and apply a CSS file with the contents "body { filter: saturate(50%); }" (it seems any filter value except for "none" works).
3. The filter is applied to the image, but it moves up so that only its lower part is visible.
Component: Untriaged → Developer Tools: Style Editor
Can also be reproduced by modifying the style of <body> in the ruleview. (or by modifying the style attribute of the <body>)
This is linked to the nature of the page generated for the image preview, and is not actually a DevTools issue.

el8: I am tempted to close this bug as WONTFIX, I'm not sure fixing it would benefit anyone. Do you have a compelling reason for changing this?
Status: UNCONFIRMED → NEW
Ever confirmed: true
Flags: needinfo?(regspam)
Priority: -- → P3
> Do you have a compelling reason for changing this?
I'm not sure if the reason can be called compelling, but here's how I discovered the bug:
There is a site with too bright colors, which I decided to fix with a Greasemonkey script that applied two rules to the page: 
body { filter: invert(100%); } 
img { filter: invert(100%); } 
The second one is to prevent images from being inverted.
Some images (mainly photos) on the site are shrunk, so in order to see them full-sized I rightclick them and choose View Image, and that's when the bug shows up.
Flags: needinfo?(regspam)
And while with Greasemonkey I can just add an @exclude rule for the image URLs, this (if I'm not mistaken) cannot be done in extensions like Stylish, that simply apply user CSS styles to everything within a domain.
Product: Firefox → DevTools
Status: NEW → RESOLVED
Closed: 5 years ago
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.