page jumps to top when clicking on radio input (only happens on Codepen mobile browsers)

When selecting a radio button at the bottom of the page on my iphone browser, the screen will jump directly to the top.

NOTE: This happens only on Codepen mobile website. This does not happen when I access the html file via Live Server on my laptop courtesy of VSCode plugin

To simulate my issue, please access the Codepen Link via your mobile phone.

Link to my Codepen to see the code

The problem does not exist when I access it via my laptop Live Server. The screen does jump to the top when tapping on a radio button. See image below

Accessing the HTML file via Live Server running on my laptop

The problem only happens on Codepen mobile site. See image below

Accessing the file via Codepen

This happens only on mobile (I am using an iphone 6s and i have tried it on chrome and safari), i have not been able to replicate the same effect on laptop/desktop. Even when setting chrome dev tools on my laptop to display the iPhone size screen representation, the problem does not exist

I have seen some solutions that require you to use "visibility: hidden" or "display: none" and setting "top:auto" for the "position:absolute" element.

But i would not like to use "visiblity:hidden" or "display:none" as it does not get read by screen-readers.

Does this issue have anything to do with how Codepen functions on mobile? Just a thought.

Any help is greatly appreciated!

---

---

This might help

I might have narrowed the problem. It seems to be something to do with the height of the content.

In the Codepen link below, you will see radio buttons at the bottom of the page. If you are using an iphone6, you can recreate the jumping to the top scenario if the height of the ".content" class is change to 1000px.

The jumping to the top of the page will not happen if you set the height to 800px instead.

Again, this link needs to be opened on a mobile phone browser

Here is the link to Codepen for this narrow test case

.content {
   width: 100%;
   height: 800px;
/* height: 1000px;   */
   background-color: grey;
 }