Images in longer posting are blurred

Support

AI-generated summary

A user, uwe_keim, reported an issue with images in longer postings appearing blurred in Google Chrome and Microsoft Edge Canary. The images load correctly after a page reload or when using Safari, Firefox, or normal Edge. The user has tried various troubleshooting steps, including clearing the cache, using Discourse safe mode, and testing in different environments (VMware, incognito mode).

uwe_keim found that the issue persists even in a clean install of Edge Canary, but not in Firefox or normal Edge. The user suspects that the problem might be related to JavaScript events not being triggered in Chromium browsers, specifically the Intersection Observer API.

codinghorror suggested testing the issue in a clean install of Firefox, which uwe_keim confirmed does not reproduce the issue.

sam proposed that the issue might be caused by Edge Canary pretending to support the Intersection Observer API without actually doing so, highlighting the risks of using alpha browsers.

1

I’m having this posting:

https://community.elemob.de/t/mein-tesla-model-3-soll-ende-maerz-2019-kommen/206/13?u=uwekeim

Whenever I load/reaload the posting for the very first time, some/all images look blurry:

image
image1202×1355 126 KB

When then hitting F5 to reload the page, it is getting better and shows all or at least nearly all of the images:

image
image1198×1351 274 KB

Sometimes, a second F5 is needed to really load all of the images.

When inspecting the blurry images, I discovered that they are not the acutal JPEGs, but some 10×10 pixel PNGs.

My environment

  • Windows 10 64 bit German
  • Google Chrome Version 75.0.3753.4 (Offizieller Build) dev (64-Bit)

My question

Are there some settings I could adjust to always have the images loaded initially?

2

I can’t seem to repro this. The images all load on Safari, Chrome, and Firefox.

3

Thanks. I can reproduce it, when selecting the third option in Google Chrome’s reload button:

“Clear cache and fully reload”

(Translated from German).

The first few images are visible, the later images are blurry, again.

When looking in Chrome’s Developer Console, I do see no errors and some warnings:

[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
add @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:5053
(anonymous) @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:4953
each @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:368
each @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:203
A @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:4952
on @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:5561
setupHandler @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:38309
setup @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:38174
setupEventDispatcher @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:39664
_bootSync @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:39584
didBecomeReady @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:40649
e.invoke @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:56670
e.flush @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:56582
e.flush @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:56753
e._end @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:57249
e.end @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:56969
e._run @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:57294
e._join @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:57270
e.join @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:57023
c @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:45520
(anonymous) @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:45621
p @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:3548
h @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:3616
_ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:5053 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
add @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:5053
(anonymous) @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:4953
each @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:368
each @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:203
A @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:4952
on @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:5561
setupComposerResizeEvents @ _application-02da28b6813b1b32a18ca63f17b17a6324621575b9a375552668c1d2444c9dc4.js:42426
didInsertElement @ _application-02da28b6813b1b32a18ca63f17b17a6324621575b9a375552668c1d2444c9dc4.js:42438
n @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:36445
trigger @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:38862
n @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:36445
r.didCreate @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:16345
e.commit @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:53274
e.commit @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:53360
t.commit @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:15515
e._renderRoots @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:16894
e._renderRootsTransaction @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:16919
e._renderRoot @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:16852
e._appendDefinition @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:16777
e.appendOutletView @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:16765
e.invoke @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:56672
e.flush @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:56582
e.flush @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:56753
e._end @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:57249
e.end @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:56969
e._run @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:57294
e._join @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:57270
e.join @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:57023
c @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:45520
(anonymous) @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:45621
p @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:3548
h @ _ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:3616
Show 2 more frames
_ember_jquery-5dbd79abddf53926275c73f77dbe61e7351258de8d2e886bf2ce86f144368848.js:2027 [Violation] 'setTimeout' handler took 629ms
[Violation] Forced reflow while executing JavaScript took 53ms

The screen then looks like this:

image
image1106×1348 191 KB

4

Can you repro this in a clean install of Firefox? Try that first. If it does not repro there, it is something about your Chrome install.

If you are the site owner have you tried in Discourse safe mode?

5

Safe mode didn’t help.

Will try clean Firefox now in VMware.

6

The issue also happens on the new Edge Canary that is based on Chromium:

On my development PC:

image
image1163×1383 144 KB

On a VMware machine:

image
image1280×1024 219 KB

Even in incognito mode:

image
image1280×1024 209 KB

It does not happen on Firefox or the normal Edge.

What I discovered is that on Firefox, the blurry images do occur, but only for approx. half a second and then they are replaced by the actual images.

So to me it looks like some JavaScript events (maybe some “image gets scrolled into viewport”) do not get fired in Chromium as they are getting in non-Chromium.

7

Most likely is that edge canary is pretending it supports intersection observer and in fact does not.

There is a big reason we don’t support alpha browsers.