1419646 - CSS `mask` causes images to become invisible at varying levels of zoom and sizes

Status: UNCONFIRMED

(Core :: Layout: Images, Video, and HTML Frames, defect, P3)

Description

[ivycarp]

Attachment: ffbugreport.css

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:58.0) Gecko/20100101 Firefox/58.0
Build ID: 20171115114231

Steps to reproduce:

Using Stylus (https://addons.mozilla.org/en-US/firefox/addon/styl-us/) and the attached userstyle, visit these pages:

http://www.scp-wiki.net/gamers-against-weed-hub
http://www.scp-wiki.net/hello-world-part-iv

On the first page, the large image is supposed to be masked. On the second, it's `mix4.png` set on an image element near the last quarter of the page. They match the selectors in the userstyle.

(Using the same extension and style on Chrome Dev 64, the image is properly masked and never disappears regardless of zoom)


Actual results:

Images are masked but it's inconsistent. Zooming in or out causes the elements to change size and at inconsistent sizes and zoom, the image becomes entirely transparent. It isn't removed from flow.

Size shown in inspector doesn't always vary when behavior changes. Sometimes at 100% zoom the image is visible and masked, but refreshing causes it to disappear again.


Expected results:

Image should be masked properly regardless of zoom.

Comment 1

[ivycarp]

Clearing cache has an effect on this.

Mask may be applied properly on first load, then after zooming to the point where the image disappears (regardless of whether it appears again at other levels of zoom or resizing), restoring zoom to 100% keeps it invisible.

Clearing the cache and refreshing restores the masked image at the level of zoom set during refresh.

Comment 2

[Timothy Nikkel (:tnikkel)]

Can the webpages be saved and then the required styles added so it's not necessary to take so many steps to reproduce this?

Comment 3

[ivycarp]

Attachment: minimal-reproduction

Comment 4

[ivycarp]

Sorry, should have made a minimal reproduction of the bug. I've attached it. Zooming in and out demonstrates the effect.

Comment 5

[Markus Stange [:mstange]]

Is this problem still happening?

Comment 6

[ivycarp]

(In reply to Markus Stange [:mstange] [on PTO until Sept 30] from comment #5)

Is this problem still happening?

Yes, I can reproduce it on Firefox Developer Edition 70.0/20190923154733.

Using the same extension and userstyle on my main user profile:

• On the first link in the original report, I get it on any zoom below 110%
• On the second link, same image, happens at 80%, 90% and then anything below 40%
• On the minimal example I get it at 30%.

Using a clean and empty profile on the same version of Firefox:

• On the minimal example I get it from 40% and lower

The graphic disappears at those zoom levels consistently. If I zoom up/down away from them, then zoom back the graphic disappears again (for example, I zoom to 90%, it disappears, I zoom to 100%, it appears again, then I zoom back to 90% it disappears) .

I'm running Windows 7 (6.1.7601) and my gpu is an R7 250 (if relevant) which IIRC was the same one I had at the time of the original report. In retrospect, my report was somewhat confusing, sorry.