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.
<rdar://problem/104545476>
Simon: Is there any chance this bug might be related to https://bugs.webkit.org/show_bug.cgi?id=245722 ?
Created attachment 465215 [details] Video illustrating how VO focus jumps unexpectedly
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.
Created attachment 465216 [details] Document example of how attaching a click event to button creates a VO focus issue
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.
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.