Scroll position resets when hovering over clickable link when body height is set to 100vh

• Component: Scrolling
• Status: RESOLVED FIXED

[Sam Eckert]

We're experiencing an issue where, when we scroll on our site, the scroll position is reset every time a user clicks or hovers over a clickable link. We were able to track down the source of the issue and it seems that setting the body height of a page to 100vh causes this issue. The issue is exclusive to Safari and WebKit and does not occur in other browsers.

A demo of this behaviour is available on https://openmoji.org/about.html

A further discussion on this issue is available here:
https://github.com/hfg-gmuend/openmoji-website/issues/15
https://github.com/hfg-gmuend/openmoji-website/pull/18

[Radar WebKit Bug Importer]

<rdar://problem/50130566>

[Simon Fraser (smfr)]

Steps:
1. Open http://openmoji.org/about.html
2. Scroll down
3. Hover over a link (like Twitter Icon below a profile)
The site scrolls back to the top


However, I can't reproduce; maybe the site was fixed? Can we get a version of the site that shows has the bug?

[Sam Eckert]

The site linked is the one causing issues, it hasn't been updated. I'm able to reproduce this issue on multiple machines, I just checked.

Here's another URL you could try:
https://hfg-gmuend.github.io/openmoji-website/about.html

If unavailable, this URL might work:
https://hfg-gmuend.github.io/openmoji-website/about

Demo Video of the issue:
https://youtu.be/noNbdwfXuIQ

[Simon Fraser (smfr)]

This might have been fixed. Could you try Safari Tech Preview (https://developer.apple.com/safari/download/)?

[Sam Eckert]

This issue seems fixed in the latest STP. When is a public update for Safari with a release of this bugfix expected? Any ideas for a temporary workaround until that bugfix is published or what might cause this issue? Thx for your help.

[Filip]

This bug persists, I've tested it on multiple Apple devices running safari, as well as the Epiphany browser (which also uses Webkit).
I have made a demo here: http://jsfiddle.net/rnzt02cL/embedded/html,css,result
and highlighted the lines which contribute to the bug.

[Filip]

I've found more properties that cause the bug and added the to the fiddle: http://jsfiddle.net/totalolage/rnzt02cL/11/embedded/html,css,result

[Simon Fraser (smfr)]

Possibly related to bug 201528.

[Simon Fraser (smfr)]

Filip, what browser/OS are you testing on? The test uses hover, so I assume this is not iOS?

I can't reproduce. Pretty sure this is fixed.

[Filip]

(In reply to Simon Fraser (smfr) from comment #9)
> Filip, what browser/OS are you testing on? The test uses hover, so I assume
> this is not iOS?
> 
> I can't reproduce. Pretty sure this is fixed.

I can't reproduce either anymore. I assume it's been fixed.