search

noeldelgado / gemini-scrollbar

:first_quarter_moon: Custom overlay-scrollbars with native scrolling mechanism for web applications
https://noeldelgado.github.io/gemini-scrollbar/
MIT License
428 stars 63 forks source link

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

Open Kristinita opened 2 years ago

Kristinita commented 2 years ago

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

  1. Open the Network section of browser developer tools.
  2. Open URL of the MCVE file.
  3. 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.

Opera + gemini-scrollbar

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:

Opera expected

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

Opera page bottom

6. Environment

  1. 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)

  2. BrowserStack:

    1. macOS Monterey:

      1. Safari 15.3

    2. Windows 11:

      1. Opera 89
      2. Edge 114

Thanks.

noeldelgado commented 2 years ago

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 commented 2 years ago

Status: CONFIRMED :heavy_check_mark:

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.