IntersectionObserver Loads Any and All Picture Elements on Init Page Load
Reported by
dennisga...@gmail.com,
Dec 19 2017
|
|||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36 Steps to reproduce the problem: 1. Use IO to lazy load img and picture elements 2. Scroll 3. Notice img loads as they are revealed in viewport vs. picture that loads all at once. What is the expected behavior? picture elements should load as they are revealed by viewport using IntersectionObserver. Same behavior that img elements already do just fine. What went wrong? picture elements all load on init page load Did this work before? N/A Chrome version: 63.0.3239.84 Channel: n/a OS Version: OS X 10.12.6 Flash Version: Reduced Test Case https://codepen.io/grayghostvisuals/pen/80c49b01793008068f571205aa8e18df
,
Dec 20 2017
,
Dec 20 2017
,
Dec 20 2017
I can't reproduce this. When I look at the test case, the images only load as they are revealed in the viewport. Can you capture video showing the bug? Preferably, with the inspector open, so I can see the src attribute on images.
,
Dec 21 2017
The <img> elements load as they should as they're revealed by the viewport. Its the <picture> element that is the issue. Those load all at once on init page load.
,
Dec 21 2017
The problem is that the picture elements have zero size before their content is loaded. That means that they all intersect the viewport simultaneously once you scroll to the bottom. I was able to get the desired behavior by adding this style:
picture { min-height: 400px; }
,
Dec 21 2017
I appreciate the efforts here. The odd scenario with all of this is Firefox will in fact lazy load them without any absolute constraints defined. Again, I appreciate the help to clarify the issue here and i will make sure to adjust accordingly in my demo.
,
Dec 21 2017
If this is indeed a case where chromium and firefox behave differently, I'd ask you to please file a bug in the tracker for the IntersectionObserver spec, which is the right place to discuss compatibility issues between browsers: https://github.com/w3c/IntersectionObserver/issues
,
Dec 21 2017
Yes absolutely and I have in fact filed one there before filing here and I also filed an issue through Firefox. Again, appreciate the insight and assistance here form everyone involved.
,
Dec 28 2017
I updated my demo and found that picture (even with constraints defined) doesn't truly honor a threshold defined. Right now the demo is at 0.5 and the img elements honor that whereas picture elements load when they become between 10-20% within viewport view. Demo: https://codepen.io/grayghostvisuals/pen/ead4041cf20a13a7533b781011e6299d |
|||||
►
Sign in to add a comment |
|||||
Comment 1 by dtapu...@chromium.org
, Dec 20 2017