firesmoke.ca - The map keeps flickering

[webcompat-bot]

URL: https://firesmoke.ca/forecasts/current/

Browser / Version: Firefox 90.0 Operating System: Windows 10 Tested Another Browser: Yes Chrome

Problem type: Site is not usable Description: Page not loading correctly Steps to Reproduce: The website is unusable because the content is not displayed correctly.

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue. The map keeps flickering , instead of having a smooth animation.

Note: The issue is not reproducible on Chrome.

I've recorded a performance profile: https://share.firefox.dev/3z8RPGL

Tested with: Browser / Version: Firefox Nightly 92.0a1 (2021-07-15) Operating System: Windows 10 Pro

Moving to Needsdiagnosis for further investigation.

[karlcow]

This seems to be fixed.

[softvision-oana-arbuzov]

Indeed, I did not experience any flickering.

Tested with: Browser / Version: Firefox Nightly 99.0a1 (2022-02-10) Operating System: Windows 10 Pro

[inv_06/2022]

[softvision-oana-arbuzov]

This seems to be reproducible again when accessing the site.

Tested with: Browser / Version: Firefox Nightly 105.0a1 (2022-07-27), Firefox Release 103.0 Operating System: Windows 10 Pro

Reopening and moving back to Needsdiagnosis.

[inv_30/2022]

[wisniewskit]

Mozregression on my macbook shows the problem all the way back to Feb. 11, so if this was fixed back then, it was probably a site change.

This looks like another case of Firefox's image flickering, as they have a series of regular tags in their markup representing each frame of animation, which they show/hide for the animation to progress. But they do so by setting the image's src on each change:

    _initImage: function () {
      // snip
      t ? this._url = i.src : (i.src = this._url, i.alt = this.options.alt)

If I set the images to have sync decoding, by adding i.src.decoding="sync" above that line, then the problem is masked away just as it is in Chrome (which is of course the interop issue at heart here).

And so we can probably write a pretty simple site patch which sets sync decoding on all the images, but ideally the site would do so on their own. But they're relying on LeafletJS (a map library) to do the image-shuffling, so this is probably going to be affecting more sites.

[webcompat-bot]

Generate outreach template

[denschub]

I have filed an issue with Leaflet (see the crosslink above). For now, having an in-library support for sync decoding would be the best way forward, as that would easy for the site to adopt. I'll move this to sitewait for now, even though it's technically "upstreamwait"... :)