CSS scroll-behavior

polarpixel

It seems that Vivaldi does not support the CSS feature:
scroll-behavior: smooth;

It would be great to have this support, because all other important browsers have it.

Thanks, Peter.

Streptococcus

@polarpixel
What about the setting in Preferences > Web pages? Does that not work?

Pathduck

@polarpixel Hi, I do not see any indication that this does not work as expected in Vivaldi.

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

https://www.w3schools.com/cssref/tryit.php?filename=trycss_scroll_behavior

"The scroll-behavior property specifies the scrolling behavior for a scroll container, when scrolling happens due to navigation, scrolling APIs [CSSOM-VIEW], or scroll snapping operations not initiated by the user [CSS-SCROLL-SNAP-1]. Any other scrolls, e.g. those that are performed by the user, are not affected by this property."
https://w3c.github.io/csswg-drafts/css-overflow-3/#propdef-scroll-behavior

"I say "programmatically triggered" because it's not going to smooth scroll the mouse wheel."
https://www.lucaspaganini.com/academy/native-smooth-scroll-with-pure-css-and-js

Do you have a basic example where this does not work? Or work differently in Vivaldi as compared to other browsers?

svm

@Pathduck
YouTube - Vivaldi MacOS scroll-behavior: smooth

lemontheme

Related: https://forum.vivaldi.net/topic/95982/smooth-scrolling-unavailable/9?_=1728742669594

Only thing that works is to launch Vivaldi from the terminal with an additional argument that explicitly enables smooth scrolling:

open -a /Applications/Vivaldi.app  --args --enable-smooth-scrolling

@Pathduck, curious to know what system you tested this on, if it's working for you?

Pathduck

@lemontheme I have no idea, it's two years ago and I'm not even on MacOS
I tested in Windows because it's rare such issues are OS-related. But sometimes they are, that's why I asked for clarification from the user(s) but they never returned so

Maybe it worked last I tried, I say it did so possibly it did.
From the date of Mar 2023 I must've tested in 5.7.

Far as I can tell, no browser on my system works on the examples now, not Chrome, not Firefox, not Vivaldi. Maybe it's because I always turn off animations in Windows, might be related.

Maybe the flag is now required to make it work, I don't know.
chrome://flags/#smooth-scrolling
https://peter.sh/experiments/chromium-command-line-switches/#enable-smooth-scrolling
Honestly "visual fluff" this is not something I care much about in any case.

The video from @svm clearly shows:

So I don't know what they're doing...

EDIT: In Windows, by default both Chromium-based and Firefox browsers detect the OS setting:

That's why I don't see it as I turn that crap off.

lemontheme

@Pathduck Whoops, I completely overlooked the date of your reply! My bad! Two years is indeed quite a while.

FWIW, I don't think this is related to a system setting. Smooth scrolling works everywhere else.

Here's my vivaldi:about.

Screenshot 2024-10-15 at 10.47.27.png

For some strange reason, Vivaldi launches with the --disable-smooth-scrolling flag, even though 'smooth scrolling' is enabled in the browser's settings. Very frustrating.

Pathduck

@lemontheme Use the flag instead:
chrome://flags/#smooth-scrolling

I have no idea if MacOS is different than Windows on this.
Don't even know if the setting in Vivaldi does anything at all...

EDIT: Here's how it seems to work in Windows:

The browser detects your "Animate controls and elements..." OS setting. This is enabled by default in Windows.
If it's turned on, smooth scrolling will be enabled, both for scrolling webpages and for the CSS property scrolling.
The setting (enabled by default) allows you to override this behaviour. And does not seem to require a restart as it says.

lemontheme

@Pathduck Thanks for trying to help out. Unfortunately, as this post on the forum points out, that flag is unavailable on macOS. The OP of that thread filed a bug report earlier this year. I did the same last month. No news about whether they've been picked up internally, though.

Screenshot 2024-10-16 at 09.16.20.png

Pathduck

@lemontheme If the flags page says the flag is unavailable, it's unavailable. I don't know why.

There's little point in reporting a bug to Vivaldi for what is a Chromium issue. The Flags page is pure Chromium, nothing Vivaldi can do about that.

I really hope some MacOS technical people on this forum can help, I'm out of my depths when it comes to WackyBackyOS.

Thot

@lemontheme said in CSS scroll-behavior:

that flag is unavailable on macOS.

Maybe in the Vivaldi Settings / Websites: There is a a ticker for „Optimized Scrolling“. Maybe the checkmark is checked off?

lemontheme

@Pathduck Ah, but that's just it. Smooth scrolling works fine in Chrome, Brave, and Arc. So clearly, Chromium is perfectly capable of providing smooth scrolling on macOS. (I haven't checked the availability of the flag, since I have no reason to.)

I'm all for not saddling developers with irrelevant bug tickets, but Vivaldi is clearly the odd-one-out as regards this issue.

Pathduck

@lemontheme said in CSS scroll-behavior:

Smooth scrolling works fine in Chrome, Brave, and Arc.

Well, do these browsers have the flag enabled?

lemontheme

@Thot There is a 'Smooth Scrolling' checkbox under Settings > Webpages which I've enabled since the start. It doesn't appear to do anything though.

lemontheme

@Pathduck Fine, I'll check, haha.

Interesting! The flag is unavailable in all other Chromium browsers I mentioned. And yet smooth scrolling works just fine.

The mystery deepens...

Thot

@lemontheme said in CSS scroll-behavior:

And yet smooth scrolling works just fine.

Out of curiosity, I made the point in Settings on and off. Smooth Scrolling is much the same, in both cases. :-o

Pathduck

@lemontheme Chrome, being a dumbed-down browser, of course does not have an obvious way to check its command line. Neither does Brave from what I can tell.

But you can see it in: chrome://gpu/ - same in Brave.
So it would be interesting what the command line is there and if the --disable-smooth-scrolling argument is used.

Have you tried in a clean profile of Vivaldi? That would've been the first thing to try. Might be something else interfering, extensions or a combination of settings:
https://help.vivaldi.com/desktop/troubleshoot/troubleshooting-issues/

Pathduck

@Thot So Smooth Scrolling works for you in Vivaldi on MacOS?

Thot

@Pathduck said in CSS scroll-behavior:

So Smooth Scrolling works for you in Vivaldi on MacOS?

Yes.

lemontheme

@Thot Alright, that's odd then. Is this on an Intel or Apple Silicon model?