Images in longer posting are blurred

uwe_keim · April 8, 2019, 9:59am

I’m having this posting:

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

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

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?

Chaboi_3000 · April 8, 2019, 10:15am

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

uwe_keim · April 8, 2019, 10:59am

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:

codinghorror · April 8, 2019, 11:26am

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?

uwe_keim · April 8, 2019, 12:02pm

Safe mode didn’t help.

Will try clean Firefox now in VMware.

uwe_keim · April 9, 2019, 5:09am

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

On my development PC:

On a VMware machine:

Even in incognito mode:

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.

sam · April 9, 2019, 5:29am

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.

Topic		Replies	Views
Imgur images broken Support	18	4894	June 17, 2020
MacOS Firefox image upload error Support	18	1427	January 22, 2022
Issue with blurring elements Dev	16	1209	August 8, 2022
Lazy Loading Images Announcements new-feature	21	5441	December 1, 2023
Adding logos in footer section Dev	31	1517	July 8, 2023

Images in longer posting are blurred

Related topics