Chrome Overlay Scrollbars not following default behavior - Why?

Question

Chrome Overlay Scrollbars not following default behavior - Why?

2.9k Views Asked by BeyondThreeWoods At 20 October 2024 at 19:40

If you launch Chrome, the vertical scrollbar will not be visible on html tables. This is controlled by the Overlay Scrollbars flag. If the flag is enabled, the vertical scrollbar will not be visible, if flag is disabled, the scrollbar will be visible. By default, my understanding is that it should equal disabled.

So confusion is 1) If you launch Chrome, presumably it launches with default settings with nothing config changed. However, vertical scrollbar will not be visible. 2) If you go into chrome://flags and switch from default -> another setting + relaunch -> back to default + relaunch, this time it will show the vertical scrollbar.

Both cases should be launching in default but why is the behavior different?

Original Q&A

There are 2 best solutions below

**killovv** · Answer 1

Overflow: overlay not working in latest chrome version 114.0.5735.91, run this html in another browser to test

<html>
<head>
    <style>
        html {
            background: #000;
        }
        body {
            background: linear-gradient(#222, #111);
            margin: 0;
        }
        #text {
            height: 150vh;
            width: 100vw;
            display: grid;
            align-items: center;
            justify-items: center;
            color: #ccc;
            font-size: 10vh;
            font-family: monospace;
            user-select: none;
        }
        ::-webkit-scrollbar {
            background-color: transparent;
        }
        ::-webkit-scrollbar-thumb {
            height: 50px;
            border: 4px solid transparent;
            border-radius: 8px;
            background-clip: content-box;
            background-color: #fff4;
        }
        ::-webkit-scrollbar-corner{
            display: none;
        }
    </style>
    <script>
        let overlay;
        this.addEventListener('click', () => {
            let a = (overlay = !overlay) ? 'overlay' : 'auto';
            text.textContent = 'overflow: '+ a;
            document.body.style.overflow = a;
        })
    </script>
</head>
<body>
    <div id="text">overflow: auto</div>
</body>
</html>

**jason_yang** · Answer 2

Chrome 114 removes the overflow: overlay scrolling mode, and makes overlay a legacy alias of auto. Using overflow: overlay is the same as overflow: auto, except that it does not prevent content from extending into the scrollbar gutter, in cases where non-overlay OS scrollbars are present. (If overlay scrollbars are present, there is no effect.)

https://developer.chrome.com/blog/chrome-114-beta/#alias-overflow-overlay-to-overflow-auto

Chrome Overlay Scrollbars not following default behavior - Why?

There are 2 best solutions below

Related Questions in GOOGLE-CHROME

Related Questions in SCROLLBAR

Related Questions in OVERLAY

Related Questions in GOOGLE-CHROME-FLAGS

Trending Questions

Popular # Hahtags

Popular Questions