1877126 - SVG doesn't render on page load, unless page is zoomed in

Status: RESOLVED DUPLICATE of bug 1901414

(Core :: SVG, defect)

Description

[random_n0body]

Attachment: Screenshot showing the bug can be reproduced in browserstack

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:123.0) Gecko/20100101 Firefox/123.0

Steps to reproduce:

Click on a link to https://docs.depict.ai/shopify-guide/customisation/product-card-editor

Actual results:

Observe how the image doesn't immediately load, instead it looks bugged (grey with two white spots)

If you do one of the following, it will start rendering correctly:

1. Hover the image URL in the devtools (this makes the main image show up as well as a preview in devtools)
2. Resize your window to a size that changes the size of the image
3. Zoom in using a trackpad or cmd + or cmd -

Expected results:

Image should load, like it does in chrome and safari.

This looks like a glitch in firefox, luckily it's quite reproducible.

To get higher chance of reproduction success:

1. Don't have the image cached (try a private window)
2. Have the page be the first page that gets visited after opening a new tab/window

If you are struggling to reproduce it locally, it is consistently reproducible on the first try in firefox 121 on browserstack on both macOS Sonoma and Windows 11, if you have a browserstack account, clicking to https://live.browserstack.com/dashboard#os=OS+X&os_version=Sonoma&browser=Firefox&browser_version=121.0&device_browser=safari&zoom_to_fit=true&full_screen=true&url=https%3A%2F%2Fdocs.depict.ai%2Fshopify-guide%2Fcustomisation%2Fproduct-card-editor&speed=1 should take you there.

Comment 1

[random_n0body]

Attachment: Demonstration of the image not rendering correctly unless zooming in

Google drive link for people who can't play h265 videos in their browser: https://drive.google.com/file/d/1Bynoe0kbBH03s3QIEb3uZkZvx_2EQAS1/view?usp=sharing (also higher bitrate)

I was wrong about the image loading when hovering it in devtools, apparently that was only a fluke. But it consistently starts rendering correctly when zooming in.

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::SVG' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 3

[Jonathan Kew [:jfkthame]]

Yeah, this reproduces for me on macOS.

Maybe related to the fact that the SVG image contains a bunch of big bitmaps (PNG resources) as data: urls; are these loaded/decoded asynchronously when rendering the SVG? Could we be snapshotting/caching the result without waiting for the images to be loaded?

It's interesting that zooming in causes the image to render, but then returning to the default zoom, it disappears again -- which feels like we've cached the rendering for that zoom level, so it stays broken until something causes us to flush and regenerate it (poking around in the DevTools inspector can cause this).

Comment 4

[Timothy Nikkel (:tnikkel)]

I suspect the patch from bug 1805599 will fix this.

Comment 5

[Timothy Nikkel (:tnikkel)]

Bug 1805599 is landed now. Could you retest on nightly?

Comment 6

[random_n0body]

Attachment: Nightly version

The nightly version I tested on

Comment 7

[random_n0body]

Attachment: The bug still happening

Comment 8

[random_n0body]

Hey, I can still reproduce the bug in latest firefox nightly, unfortunately, see the attached screenshots.

To avoid unnecessary back and forth, I think it would be great if you could click on the reproduction link in firefox nightly next time you want to verify if the bug still happens. If you're unable to install firefox nightly I can of course gladly help out :)

Comment 9

[Robert Longson [:longsonr]]

Seems OK on nightlies now. Something recent as it's broken on 127.0

Comment 10

[Jonathan Kew [:jfkthame]]

This was fixed in bug 1901414. (That report related to font loading, but the same issue affected the image resources in this example.)