2

The following code sample does not smoothly scroll in Chrome 67; when you use a mouse to grab the scrollbar, you will notice the scrollbar drag gets aborted every 1 second when the timer updates the text in the title.

<html><body style="margin:0pt;">
    <div style="height:100vh;overflow:hidden;display:grid;grid-template-areas:'topbar' 'body'">
        <div style="grid-area:topbar;background-color:lightblue">
            This is a fixed top bar with ticker: <span id="ticker">0</span>
        </div>
        <div style="grid-area:body;font-size:200pt;overflow:auto;">
            Try and scroll down! a a a a a a a a a a a a a a a a a 
        </div>      
    </div>
    <script type="text/javascript">
        setInterval(function(){
            document.getElementById("ticker").innerHTML = Number(document.getElementById("ticker").innerHTML) + 1;
        }, 1000);
    </script>
</body></html>

It works as expected in Edge.

Is there a solution to this problem?

Limbo
  • 2,123
  • 21
  • 41
Thomas Meeks
  • 21
  • 3
  • Has also been reported here https://stackoverflow.com/questions/49370724/css-grid-scrolling-in-chrome-with-js-content-update-scroll-location-jumpy ... with no solution – Protozoid May 31 '18 at 16:19
  • Slightly offtopic conversation here https://stackoverflow.com/questions/47013688/correct-implementation-of-css-grid-in-firefox-and-chrome, but issue not replicated in the code examples there, perhaps you can learn from them – Protozoid May 31 '18 at 16:21
  • It looks like the Chromium devs have a fix, looking at their bug tracker here: https://bugs.chromium.org/p/chromium/issues/detail?id=833837 "...the issue seems to be fixed on latest canary 68.0.3399.0" – Thomas Meeks Jun 01 '18 at 14:20

0 Answers0