Images Inside <header> Element Do Not Lazy Load #863
Description
Description
A user reported that there is a bug where images placed inside a <header> element are not lazy-loaded, and this issue impacts the scaling behavior of other pictures on the page.
- Images outside the
<header>element are lazy-loaded and scaled appropriately. - Adding an identical image inside the
<header>element prevents it from being lazy-loaded or scaled. - Furthermore, the addition of this image inside the
<header>causes the previously correctly scaled image outside the<header>to stop scaling as well.
I am able to replicate the first two steps easily, but their third point do not exist at my end, on my end, if I use same image then it is lazyloaded outside header element too.
Step-by-step reproduction instructions
- Add an image to the Header element. I used the Twenty Twenty theme and added this piece of HTML code to the Header.html File.
- Change Bypass Lazy Load for First Images settings to 0 to ensure that images are lazyloaded.
- Check on the site, that this image is not lazyloaded at all.
Screenshots, screen recording, code snippet or Help Scout ticket
Reported here - https://secure.helpscout.net/conversation/2764612077/441276
Can be checked here - https://verdantfarmer.s1-tastewp.com/test/
Images provided by user:
Environment info
No response
Is the issue you are reporting a regression
No