[css-scroll-snap] Snapping to center of zoomed image in gallery

[CharlesBelov]

Re: Motivating Examples

How does the spec or site code handle situations for the following use case in the event of zoomed images in a photo gallery?

Steps:

1. Site visitor scrolls through the gallery to a particular image.

2. Browser snaps image to center point as a result of the CSS in the example.

3. Site visitor pinch-zooms to expand the image such that the image is now much larger than the viewport or provided visible area. I suspect this particular concern is more properly directed at a different spec in its own separate issue, but am mentioning it in order to be rigorous.

Expected behavior: Zoomed image stays zoomed.

Feared behavior: Zoomed image snaps back to original size at the center point.

4. Visitor attempts to pan around the enlarged image in order to see all of the image contents. This is the primary focus of concern for this issue.

Expected behavior: Visitor can pan around the image freely with no further snapping taking place.

Feared behavior: Any time the visitor pans toward the edge of the image, the browser snaps the image back to center point and/or resets the zoom.

5. The site visitor inadvertently overshoots the edge of the image. This is related to the previous step. Please advise if this needs to be a separate issue.

Desirable behavior:
The image snaps back to the nearest non-overshooting point.
or
The image remains overshot where the visitor left it.

Feared behavior: Any time the visitor inadvertently overshoots the edge of the image, the browser snaps the image back to center point, resets the zoom, or snaps to the center point of the next or previous image.

[fantasai]

See https://www.w3.org/TR/css-scroll-snap-1/#snap-overflow
If this is not implemented correctly, file bugs against the implementations.
If you think the spec is unclear, please be more precise about what you find unclear.

[jonjohnjohnson]

@CharlesBelov I think your concerns are well meaning, but I'm not sure what you expect or fear are really at hand.

Try opening this demo https://output.jsbin.com/subojom and attempt your steps in iOS Safari.

I think the major break down might be conflating zooming into the window versus "zooming" in an image in a way that manipulates its styling and therefore its geometry which would alter the snap offset inside the scroll snapping element. Pinching and zooming into the viewport scroller allows you to pan/scroll around the window, apart from how the snap/alignment happens in the snapport.

There can be strangeness between layout viewport and visual viewport but if you are still concerned about accessibility here, could you provide a demo or two of the actual problems you see?

[fantasai]

[Sorry, tagged commit to wrong issue.]

[pfgithub]

https://output.jsbin.com/ruhajoz

Screen.Recording.2022-05-23.at.8.45.43.PM.mov

• Zoom in on a touchscreen device or with a trackpad (so it makes the VisualViewport not cover the entire viewport)
• Notice how it is possible to pan left and right, but not up and down on the card

For image galleries, this makes a really bad user experience. This recording is from Firefox, the same issue is seen on Chrome and iOS safari.

I think this is in the spec - it talks about scroll snapping being relative to the visual viewport, which changes when zoomed in

[CharlesBelov]

@pfgithub Thank you for this test. Not sure it will help, given that the issue is closed. That said, I got different (and equally problematic) results on an iPhone SE running Safari from what you describe (I wasn't actually able to view your video - github isn't presenting video controls to me in Firefox).

Trigger warning: The following screen-capture videos have quite a bit of motion

In the first video, I didn't do any zooming. The left and right parts of the card were cut off in portrait and I was not able to scroll left or right to reveal them. I was able to scroll up and down. If I rotated to landscape, I saw the whole cards and could scroll up and down.

3583.test.1.mov

In the second video, I did zoom in. The left and right parts of the card were cut off in portrait. Attempting to scroll left or right resulted in a vertical scroll to the next or previous card.

3583.test.2.mov

.

[pfgithub]

@CharlesBelov That example has the cards set to overflow:hidden, so the issue you saw is unrelated to scroll snap. Here's a fixed example that demonstrates the scroll snap problem better:

https://output.jsbin.com/wagifehito

And a video (if it works. I'm using firefox and your videos worked fine for me, not sure what's wrong):

Screen.Recording.2022-05-24.at.4.43.27.PM.mov