Scroll-behavior: smooth; style property breaks scrolling

Vega Open Beta Bug Reports
1

:backhand_index_pointing_right: Bug Description

We have a vegaOS app using the webview component. The html5/javascript code in the web app is common code used in our app on other platforms

The app has a top menu bar

element as a scrollable container for individual
menu elements.

This works as expected and the elements scroll correctly inside the container to show any menu elements that overflow the main container.

However, when the outer container

has the ‘scroll-behavior: smooth;’ style property set, the elements no longer scroll and any menu elements which overflow the container become inaccessible.

I suspect that this might be a bug in the ‘scroll-behavior’ style, or possibly it is not supported, or it is not functional due to smooth scrolling being disabled or only partially supported on the OS.

I’ve also noticed that this only impacts the app when running on actual hardware, I have confirmed that ‘scroll-behavior: smooth;’ works as expected in the simulator.

Environment

  • SDK Version: 0.22.6150
4

Hi @MarkBarbieri,

Welcome to Amazon Developer Community!

Thank you for the detailed bug report on the scroll-behavior issue with the WebView component.

Our team is investigating this issue and will provide an update as soon as we have more information. To help us reproduce the issue, could you share:

  1. A minimal code snippet that demonstrates the broken scrolling behavior on your device

  2. How scrolling is triggered - via D-Pad navigation, or programmatically (e.g., scrollTo(), scrollIntoView())?

Thanks for helping us improve the Vega platform.

Warm regards,
Aishwarya

5

Hi @MarkBarbieri ,

Just following up on my previous message - could you share the minimal code snippet and confirm how scrolling is triggered (D-Pad or programmatically)?

Thanks,
Aishwarya

6

Hi Aishwarya,

Apologies, I didn’t see the request for a code sample on your original post.

I’ve spent some time reproducing this issue with a minimal code sample, and in the process I have identified the root cause in our core code which was only being exposed on this device due to a unique set of conditions. An erroneous and transient ‘scroll-snap-type’ style was interfering with the ‘scroll-behavior: smooth’ style. Removing the transient ‘scroll-snap-type’ style has resolved the problem.

You can close this issue.

Thanks

Mark