I'm creating a Web page in React that is vertically written and progresses from right to left (i.e., a page with writing-mode: vertical-rl).
However, when viewing this page on the Chrome browser on Android, I've noticed unintended scrolling occurring when adding a new element to the list of elements rendered by React. Is there a way to prevent this scrolling?
For reference, I've already tried specifying the appropriate keys or assigning random values to the key, and setting overflow-anchor: none;.
Steps to reproduce: You can find the sample code on this sandbox. When viewed in Chrome on a PC, you can confirm the intended behavior as follows:
- Clicking "add item" adds text each time.
- The page starts from the top right, and even when elements are added, the first element remains displayed at the top right.
You can confirm the unintended scrolling phenomenon on Android as follows:
- After opening the sandbox link, copy the URL of the demo on the right and paste it into Chrome on Android.
- On the opened page, click "add item" several times.
- Scrolling occurs when long text is added.