WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
RESOLVED FIXED
250999
VoiceOver navigation breaks on a combination of scroll-snap on html/:root and large fixpos images
https://bugs.webkit.org/show_bug.cgi?id=250999
Summary
VoiceOver navigation breaks on a combination of scroll-snap on html/:root and...
Johannes Odland
Reported
2023-01-22 23:44:10 PST
Created
attachment 464601
[details]
A video of the bug VoiceOver navigation breaks down on a specific combination of scroll-snap and large media items. A combination of large fixpos images and scroll snap seems to break VoiceOver navigation. I'm not sure what exactly causes the bug, but I have been able to reproduce the issue in this codepen:
https://codepen.io/johannesodland/pen/VwBQMXJ
. The codepen must be opened in debug mode on an iPhone. A video of the issue is attached. The codepen consists of a set of fixpos images with `height: 100vh` and a set of sections that have `height: 100vh` and `scroll-snap-align: top`; Expected result: One should be able to navigate all the elements of the page in sequence: - Link - Image Description 1 - Section 1 - Image Description 2 - Section 2 - Section 3 - Section 4 Actual result: VoiceOver navigation breaks down, and routes you back to an earlier item: – Link – Image Description 1 - Section 1 - Image Description 2 (Browser chrome resizes) - Image Description 1 - Link - Section 1 Observations: 1. The bug seems to happen after a visual glitch or browser chrome retracting: When VoiceOver focuses on an image that is the size of the large viewport the browser-chrome/url-bar retracts to make room for the image. The frame after it often reappears again, probably due to scroll-snap. The bug appears after this. VoiceOver gets stuck in a loop, and it can only be broken by touching and setting VoiceOver focus somewhere else. 2. VoiceOver struggles with scroll-snap on :root in general. It will sometimes focus on an element, but scroll-snap will snap to a different element. As a result the element focused by VoiceOver ends up outside the screen. 3. The bug is not deterministic. Sometimes things work fine, sometimes it breaks down. It might be timing related. I'm setting severity to major as this makes some pages inaccessible to VoiceOver users and I'm not sure of the exact cause and extent of this bug. Feel free to change it as you see fit.
Attachments
A video of the bug
(1.95 MB, video/quicktime)
2023-01-22 23:44 PST
,
Johannes Odland
no flags
Details
Video illustrating how VO focus jumps unexpectedly
(8.43 MB, video/quicktime)
2023-02-28 02:31 PST
,
Aron
no flags
Details
Document example of how attaching a click event to button creates a VO focus issue
(1.56 KB, text/html)
2023-02-28 02:35 PST
,
Aron
no flags
Details
View All
Add attachment
proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1
2023-01-22 23:44:28 PST
<
rdar://problem/104545476
>
Johannes Odland
Comment 2
2023-02-21 04:54:50 PST
Simon: Is there any chance this bug might be related to
https://bugs.webkit.org/show_bug.cgi?id=245722
?
Aron
Comment 3
2023-02-28 02:31:19 PST
Created
attachment 465215
[details]
Video illustrating how VO focus jumps unexpectedly
Aron
Comment 4
2023-02-28 02:34:07 PST
I'm not sure if the issue I experience is related to this bug or perhaps another ticket needs to be raised but I can't navigate t=content effectively using VO since I upgraded to iOS 16.3.1. When I attach a click event listener to buttons and then navigate through those buttons using VO, the focus jumps automatically to the first interactive button on the page. Please see the attached video example and the code example in VOFocus.html.
Aron
Comment 5
2023-02-28 02:35:06 PST
Created
attachment 465216
[details]
Document example of how attaching a click event to button creates a VO focus issue
Aron
Comment 6
2023-02-28 02:45:10 PST
I'm unsure how that's happened but this issue is more difficult to reproduce after I changed the Tabs setting in Safari to "Single Tab" so that the browser toolbar appears on the top. The VO cursor seems to work fine for the most part but breaks sometimes when I navigate from the bottom of the content back up quite quickly.
Johannes Odland
Comment 7
2023-05-22 04:42:41 PDT
Moved the test case here for easier testing:
https://johannesodland.github.io/browserbugs/2023/safari-voice-over-scroll-snap-large-fixpos-image-issue.html
Retested on iOS Safari 16.5 I can no longer reproduce the issue, it seems to be fixed.
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug