scroll-behavior: smooth doesn't work on <html /> in Chrome-CodePudding

I'm trying to replace a JavaScript smooth scroll:

document.getElementById('my-element').scrollIntoView({ behavior: 'smooth' });

with a CSS one using scroll-behavior: smooth

However in my case, the "overflowing" element is the tag.

When I don't add

html {
    scroll-behavior: smooth;
}

to my CSS, clicking on links to elements work fine in that the page actually scrolls to the element in question. But the scrolling is of course not "smooth".

However when I add the above CSS snippet and click on my <a href="#my-element" /> link. It does not scroll at ALL.

As soon as I remove the scroll-behavior: smooth it starts working again...

Interestingly this seems to only be a problem in Chromium. Both Firefox and Safari scrolls smoothly when I add the scroll-behavior to the html tag. But it completely breaks the functionality of the link in Chrome.

I then tried adding a overflow-y: scroll; scroll-behavior: smooth; and a set height to a container that surrounds the elements I want to scroll and that worked! Any scrolling using href inside that container became smooth ✅... This also confirms it is not a browser or OS setting I have that is disabling my smooth scrolling.

The feature does work for me! Just not when applied to the tag.

I don't want my container to be the one where the scrollbar is though.

How can I get scroll-behavior: smooth to work on the level?

My html styles are pretty simple and I couldn't find anything that should interfere with scroll-behavior:

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: 100%;
}

I did also try to move the scroll-behavior to the <body /> but that also didn't work.

I tried specifically giving my html tag an overflow-y: scroll. But that made no difference.

and for sanity check, I also tried scroll-behavior: smooth !important; but same thing.

Lastly I also tried adding:

* {
    scroll-behavior: smooth;
}

as I've seen some comments mention this. But that does not work either.

CodePudding user response：

Does the snippet below work for you?

Note the smooth part of the scroll doesn't work in Safari, but it still jumps to the bottom

html { scroll-behavior: smooth; -webkit-scroll-behavior: smooth }
body { margin: 0 }
img { display: block; max-width: 100% }

<h1>Est parturient curae quis.</h1>

<h4>A nisi morbi ullamcorper taciti tempus at a vel suspendisse vestibulum parturient pulvinar eu gravida a lectus senectus.</h4>

<a href="#bottom">Go to bottom</a>

<p>Tempor a vestibulum consectetur sodales condimentum scelerisque luctus aptent eget leo placerat pharetra tempor tincidunt adipiscing quis sem sociosqu est a ac dictum ut bibendum a. Pulvinar vestibulum posuere hac adipiscing facilisis sem suspendisse potenti at erat ultricies accumsan elit a proin condimentum dictum suspendisse senectus ridiculus venenatis. Netus condimentum tellus at est porta est ac ultricies fames a arcu consequat id cubilia adipiscing a posuere.</p>

<img src="https://picsum.photos/1000?random=1">

<p>Adipiscing nunc pretium placerat rhoncus scelerisque ullamcorper proin dictum eu aliquet cubilia sociis vehicula gravida mattis consectetur vestibulum a. Curabitur phasellus a suscipit eros phasellus laoreet fringilla tempus molestie lectus adipiscing felis id ut. Lectus eleifend pulvinar auctor ad a etiam conubia varius a tempus vestibulum suspendisse habitant et eu dolor suspendisse nec lacinia. Nascetur ullamcorper eros sed elit orci a quam nec turpis dui est ullamcorper scelerisque a ligula posuere vestibulum posuere litora diam potenti. Justo condimentum vestibulum nullam a urna suspendisse velit vestibulum id mattis lectus cursus sociosqu quisque nec pretium scelerisque natoque sagittis ac litora sagittis erat a. Adipiscing justo per dapibus consectetur massa dolor curae suspendisse cum a scelerisque quisque a adipiscing duis a rhoncus proin accumsan odio penatibus fermentum fringilla orci est potenti viverra parturient.</p>

<p>Mus ad ullamcorper vestibulum adipiscing condimentum a nam id ut sociosqu quam eu convallis a a elit sed ullamcorper lacus auctor. Dapibus quis elementum ullamcorper id sed luctus suspendisse condimentum fames ut at convallis magna nec litora a ultricies bibendum ullamcorper velit a in. A nostra parturient suscipit condimentum ac leo diam parturient a metus nullam diam suspendisse volutpat a habitasse mi vitae suscipit nullam cursus suspendisse a leo parturient litora. Vulputate porta at ad eu est parturient nam vivamus nibh urna primis parturient senectus parturient fusce habitasse consequat nam euismod malesuada a.</p>

<img src="https://picsum.photos/1000?random=2">

<p>Arcu duis condimentum a nisi metus a turpis vestibulum vel tristique a dignissim vel penatibus adipiscing nisi fermentum eleifend parturient integer at ipsum parturient arcu nunc a eu. Turpis adipiscing urna mi accumsan leo laoreet arcu nec lectus velit a egestas condimentum primis sem tempor sociis scelerisque amet duis vestibulum nibh nisi a conubia. Tincidunt scelerisque mi a a suspendisse convallis eu elit bibendum magna tempor consequat a enim a ac. Arcu suspendisse penatibus posuere aenean lacinia condimentum dignissim phasellus nisl ut pulvinar nunc a fermentum adipiscing fermentum nisl maecenas consectetur fusce.</p>

<p>A fusce nunc metus mattis habitant parturient urna cras nullam est ut eu erat elementum morbi eget scelerisque scelerisque consectetur. Condimentum condimentum ad sed mollis consectetur mattis vitae commodo facilisi facilisi laoreet cubilia nam vel parturient mi scelerisque rhoncus ligula netus parturient. Vestibulum parturient a adipiscing vestibulum eget massa arcu a a torquent suscipit senectus hac libero cubilia elit vestibulum.</p>

<div id="bottom"></div>

CodePudding user response：

I found the issue:

https://bugs.chromium.org/p/chromium/issues/detail?id=1299237&q=scrollIntoView&can=2

It is a Chrome bug where the JS function scrollIntoView({ behavior: smooth }) and scroll-behavior: smooth; CSS property will be cancelled if there is another call or scroll action happening in an unrelated scrolling box.

In my case, I had a carousel that was using scrolling to animate the carousel items moving in a requestAnimationFrame

This bug was causing my smooth-scroll links to be cancelled on every tick due to the active scroll animation further down the page.

This bug has been open since Feb 19, 2022, still not fixed and haven't gotten any attention. So I will have to end up rewriting my carousel logic to use transform: translate instead scrolling to resolve this issue for Chrome users.