Bug 197189 - Scroll position resets when hovering over clickable link when body height is set to 100vh
Summary: Scroll position resets when hovering over clickable link when body height is ...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Scrolling (show other bugs)
Version: Safari 12
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2019-04-23 01:27 PDT by Sam Eckert
Modified: 2019-10-22 09:31 PDT (History)
3 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Sam Eckert 2019-04-23 01:27:02 PDT
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
Comment 1 Radar WebKit Bug Importer 2019-04-23 08:32:27 PDT
<rdar://problem/50130566>
Comment 2 Simon Fraser (smfr) 2019-04-23 12:00:04 PDT
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?
Comment 3 Sam Eckert 2019-04-23 12:23:06 PDT
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
Comment 4 Simon Fraser (smfr) 2019-04-23 12:41:24 PDT
This might have been fixed. Could you try Safari Tech Preview (https://developer.apple.com/safari/download/)?
Comment 5 Sam Eckert 2019-04-23 13:44:36 PDT
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.
Comment 6 Filip 2019-08-07 04:34:09 PDT
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.
Comment 7 Filip 2019-08-07 05:19:11 PDT
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
Comment 8 Simon Fraser (smfr) 2019-10-17 16:13:51 PDT
Possibly related to bug 201528.
Comment 9 Simon Fraser (smfr) 2019-10-21 15:12:53 PDT
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.
Comment 10 Filip 2019-10-22 09:31:32 PDT
(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.