0

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?

BeyondThreeWoods
  • 1
  • 1

2 Answers2

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

jason_yang
  • 21
  • 1
0

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

<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>
killovv
  • 51
  • 3