Incorrect loading behaviour in Chrome web browser
felixranesberger opened this issue · comments
Reproduction
I cant share the link to the customer, but it happens on two webpages in the menu.
Describe the bug
Chrome preloads menu images on a customer webpage of mine, even if they are hidden initially.
Hidden images have no width and height and the auto-sizes calculation skips and sets no sizes attribute.
The srcset injection still occurs and replaces the data-srcset with srcset.
Without a sizes attribute set, the image will fallback to the default 100vw value and will load the largest image possible (with a large screen).
The images are loaded after the CSS is loaded, so the image should already hidden by then.
Only Chrome has this issue, Firefox behaves correctly.
Order of events
- HTML is loaded
- CSS is loaded main-[hash].css
- Hidden images are loaded by Chrome (not Firefox)
- Images have no size => sizes attribution fails => no sizes attribute set
- Srcset is still injected
- Without sizes attribute, browser fallbacks to 100vw.
- Loads large mega-navi.jpg (example - happens with other images in the menu too)
Additional context
No response
Logs
No response
Do you have an idea, why this would occur?
@felixranesberger What was the solution to your problem?
The original issue of chrome preloading the images, even if they're not visible was somehow fixed.
I updated from v0.10.0 to v.0.10.2, but not sure if this resolved the issue.
Currently the auto sizes does not work, but I'm creating a pull request to fix the issue.
I closed the GitHub issue to cause no confusion 👍