bug(lazy-loading): gemini-scrollbar prevent native lazy loading for iframes #69

Kristinita · 2022-08-26T16:28:42Z

1. Summary

Native iframe lazy-loading doesn’t work for browsers, that support it without polyfill if I use gemini-scrollbar.

2. Steps to reproduce

Open the Network section of browser developer tools.
Open URL of the MCVE file.
Scroll MCVE file to the bottom and look at Network requests.

3. MCVE

Sources, URL on Repl.it:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Kira iframe native lazy-loading + gemini-scrollbar MCVE bug</title>
        <!-- [INFO] Polyfill for browsers that don’t support iframe lazy-loading:
        https://github.com/mfranzke/loading-attribute-polyfill -->
        <script src="https://cdn.jsdelivr.net/npm/loading-attribute-polyfill/dist/loading-attribute-polyfill.umd.min.js" async></script>
        <script src="https://cdn.jsdelivr.net/npm/gemini-scrollbar/index.js" defer></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gemini-scrollbar/gemini-scrollbar.min.css">
        <style>
        	html {
        		height: 100%;
        	}
        	p {
        		margin-bottom: 200rem;
        	}
        </style>
        <script>
        	window.onload = function() {
        	    var scrollbar = new GeminiScrollbar({
        	        element: document.querySelector("body")
        	    }).create();
        	};
        </script>
    </head>
    <body>
    	<p>Kira Genius!</p>
    	<noscript class="loading-lazy"><iframe loading="lazy" src="https://video.ploud.fr/videos/embed/5d800b76-c468-4510-b2af-d84d28def4a9"></iframe></noscript>
    	<p>Kira Hero!</p>
    	<noscript class="loading-lazy"><iframe loading="lazy" src="https://video.ploud.fr/videos/embed/15613130-601b-4101-bc39-2dde03256254"></iframe></noscript>
    	<p>Kira Amazing!</p>
    	<noscript class="loading-lazy"><iframe loading="lazy" src="https://video.ploud.fr/videos/embed/8c9305e6-671e-4d4d-9abe-e045cc9740df"></iframe></noscript>
    	<p>Kira Goddess!</p>
    	<noscript class="loading-lazy"><iframe loading="lazy" src="https://video.ploud.fr/videos/embed/1c93a77b-371d-446c-a293-6a872a2088a9"></iframe></noscript>
    </body>
</html>

4. Current behavior

For Firefox and Safari, which don’t support lazy loading for iframes by default and works via polyfill, iframes successfully loaded lazy.

But Chrome, Opera and Edge supporting lazy loading for iframes by default, all iframes content are loaded immediately when the URL is opened. No lazy loading. It’s very bad for web performance.

5. Behavior without gemini-scrollbar

I give here an example without a custom scrollbar to demonstrate that the bug related to gemini-scrollbar.

5.1. MCVE

Sources, URL on Repl.it:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1"
+       <title>Kira iframe lazy-loading MCVE</title>
-       <title>Kira iframe native lazy-loading + gemini-scrollbar MCVE bug</title>
        <!-- [INFO] Polyfill for browsers that don’t support iframe lazy-loading:
        https://github.com/mfranzke/loading-attribute-polyfill -->
        <script src="https://cdn.jsdelivr.net/npm/loading-attribute-polyfill/dist/loading-attribute-polyfill.umd.min.js" async></script>
-       <script src="https://cdn.jsdelivr.net/npm/gemini-scrollbar/index.js" defer></script>
-       <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gemini-scrollbar/gemini-scrollbar.min.css">
        <style>
-        	html {
-        		height: 100%;
-        	}
        	p {
        		margin-bottom: 200rem;
        	}
        </style>
-       <script>
-        	window.onload = function() {
-        	    var scrollbar = new GeminiScrollbar({
-        	        element: document.querySelector("body")
-        	    }).create();
-        	};
-       </script>
    </head>
    <body>
    	<p>Kira Genius!</p>
    	<noscript class="loading-lazy"><iframe loading="lazy" src="https://video.ploud.fr/videos/embed/5d800b76-c468-4510-b2af-d84d28def4a9"></iframe></noscript>
    	<p>Kira Hero!</p>
    	<noscript class="loading-lazy"><iframe loading="lazy" src="https://video.ploud.fr/videos/embed/15613130-601b-4101-bc39-2dde03256254"></iframe></noscript>
    	<p>Kira Amazing!</p>
    	<noscript class="loading-lazy"><iframe loading="lazy" src="https://video.ploud.fr/videos/embed/8c9305e6-671e-4d4d-9abe-e045cc9740df"></iframe></noscript>
    	<p>Kira Goddess!</p>
    	<noscript class="loading-lazy"><iframe loading="lazy" src="https://video.ploud.fr/videos/embed/1c93a77b-371d-446c-a293-6a872a2088a9"></iframe></noscript>
    </body>
</html>

5.2. Result

Lazy loading for iframes successfully works for all browsers I tested.

When the page loads, solely the first iframe is loaded:

The remaining 3 iframes are loaded as the page scrolls down:

6. Environment

Local:
1. Microsoft Windows [Version 10.0.19041.1415]:
  1. Firefox 104.0 (64-bit) (Troubleshoot Mode)
  2. Chromium Version 103.0.5060.114 (Official Build) (64-bit) (with --disable-extensions and --disable-plugins arguments)
BrowserStack:
1. macOS Monterey:
  1. Safari 15.3
2. Windows 11:
  1. Opera 89
  2. Edge 114

Thanks.

The text was updated successfully, but these errors were encountered:

noeldelgado · 2022-08-30T03:01:23Z

Thanks for the detailed report!

It might be related to the library updating the DOM structure at runtime. To prevent this, would it work for you to provide the required HTML structure up-front and use the createElements: false option? I did some quick tests and it seems to work as expected.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Kira iframe native lazy-loading + gemini-scrollbar MCVE bug</title>
        <!-- [INFO] Polyfill for browsers that don’t support iframe lazy-loading:
        https://github.com/mfranzke/loading-attribute-polyfill -->
        <script src="https://cdn.jsdelivr.net/npm/loading-attribute-polyfill/dist/loading-attribute-polyfill.umd.min.js" async></script>
        <script src="https://cdn.jsdelivr.net/npm/gemini-scrollbar/index.js" defer></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gemini-scrollbar/gemini-scrollbar.min.css">
        <style>
        	html {
        		height: 100%;
        	}
        	p {
        		margin-bottom: 200rem;
        	}
        </style>
        <script>
        	window.onload = function() {
        	    var scrollbar = new GeminiScrollbar({
        	        element: document.querySelector("body"),
+                       createElements: false  
        	    }).create();
        	};
        </script>
    </head>
+    <body class="gm-scrollbar-container">
-    <body>
+       <div class="gm-scrollbar -vertical"><div class="thumb"></div></div>
+       <div class="gm-scrollbar -horizontal"><div class="thumb"></div></div>
+       <div class="gm-scroll-view">
    	<p>Kira Genius!</p>
    	<noscript class="loading-lazy"><iframe loading="lazy" src="https://video.ploud.fr/videos/embed/5d800b76-c468-4510-b2af-d84d28def4a9"></iframe></noscript>
    	<p>Kira Hero!</p>
    	<noscript class="loading-lazy"><iframe loading="lazy" src="https://video.ploud.fr/videos/embed/15613130-601b-4101-bc39-2dde03256254"></iframe></noscript>
    	<p>Kira Amazing!</p>
    	<noscript class="loading-lazy"><iframe loading="lazy" src="https://video.ploud.fr/videos/embed/8c9305e6-671e-4d4d-9abe-e045cc9740df"></iframe></noscript>
    	<p>Kira Goddess!</p>
    	<noscript class="loading-lazy"><iframe loading="lazy" src="https://video.ploud.fr/videos/embed/1c93a77b-371d-446c-a293-6a872a2088a9"></iframe></noscript>
+       </div>
    </body>
</html>

Kristinita · 2022-09-04T14:24:29Z

Status: CONFIRMED ✔️

1. Behavior

Lazy loading for iframes successfully works for me in MCVE and real examples if createElements: false.

I have tested the behavior in all the above browsers.

2. Default implementation

Currently, the native HTML lazy loading feature described in the specification solely works if createElements: false. In my opinion, gemini-scrollbar shouldn’t prevent lazy loading by default; plugin default settings shouldn’t interfere with any native HTML features at all.

@noeldelgado , what do you think about it?

Thanks.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

bug(lazy-loading): gemini-scrollbar prevent native lazy loading for iframes #69

bug(lazy-loading): gemini-scrollbar prevent native lazy loading for iframes #69

Kristinita commented Aug 26, 2022

noeldelgado commented Aug 30, 2022

Kristinita commented Sep 4, 2022

bug(lazy-loading): gemini-scrollbar prevent native lazy loading for iframes #69

bug(lazy-loading): gemini-scrollbar prevent native lazy loading for iframes #69

Comments

Kristinita commented Aug 26, 2022

1. Summary

2. Steps to reproduce

3. MCVE

4. Current behavior

5. Behavior without gemini-scrollbar

5.1. MCVE

5.2. Result

6. Environment

noeldelgado commented Aug 30, 2022

Kristinita commented Sep 4, 2022

1. Behavior

2. Default implementation