uwe_keim
April 8, 2019, 9:59am
1
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?
I can’t seem to repro this. The images all load on Safari, Chrome, and Firefox.
1 Like
uwe_keim
April 8, 2019, 10:59am
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:
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?
2 Likes
uwe_keim
April 8, 2019, 12:02pm
5
Safe mode didn’t help.
Will try clean Firefox now in VMware.
uwe_keim
April 9, 2019, 5:09am
6
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
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.
5 Likes
