Problems with browsers auto-scrolling to elements user is interacting with

Scroll down.

A bit more.

Main issue (currently affects Chrome)

Setup:

• Chrome
• body has overflow: hidden.
• Scrolling happens inside a nested element.
• We are restyling a checkbox element using a common technique of visually hiding the input, and styling adjacent element with input:{state} + {element} selectors.
• The actual checkbox input is hidden from layout using a common technique included in projects such as html5boilerplate, which sets it as position: absolute with no coordinates, and than hides it with clip: rect(0, 0, 0, 0) and some other styles to ensure it stays hidden and won't affect layout.

Due to the scrolling setup on this page, chrome sees the actual input as being down below the page instead of where it actually is.
When we than click this checkbox, chrome tries to be smart and auto-scroll to the input element by scrolling the documentElement, and pretty much breaks the website, making it look like the whole content just disappeared.

(use the Fix it button in the bottom left corner to correct it)

click me

Other UX issues with this kind of behavior I've encountered

1. Website that instead of infinite scrolling, provides a "Load more" button. Clicking this button loads new content, but the browser than scrolls to the clicked button to position it below cursor. Again, the browser is trying to be smart, and position the button so that it can be clicked again without repositioning the cursor, but instead I loose my scroll position, and I have to scroll up and find where the newly loaded content begins.

2. A tabular list of rows, below which is an "Add row" button. You click it, row gets added, and again, the browser thinks it's a good idea to scroll so that button is at the same spot below cursor ready to be clicked again. But the list of rows looks very monotone, which results in user not registering that any row was added, compelling them to press it again.
The expected behavior is when I press a button to add a row, the new row will push the button down and now I have the row below cursor. Anything else is just confusing, and users have to learn about the existence, and how to live with this annoying browser behavior.

Solution

Please stop trying to be smart, guessing what user wants to do, and just do what is expected. This will make websites more predictable, and not waste developer's time with these quirks where they have to spend hours debugging why clicking a checkbox ERASES MY WHOLE APP!!

Fix it