Skip to content

Remove 'Image Zoom' on mobile for carousels #15922

@data-sync-user

Description

@data-sync-user

On mobile devices, the Portrait Card Set and Image Carousel blocks exhibit a native browser "image zoom" behavior when a user swipes horizontally through the carousel. As the user's finger moves across the screen, the images pinch and scale, creating a jarring, unintended zoom effect that conflicts with the swipe/scroll gesture. This degrades the touch experience and makes the carousel feel unreliable.

The Portrait Card Set was originally built as a static 3-column grid, converting to a carousel when 4+ cards are present (see TP1-2783). The zoom behavior is a side effect of how touch events interact with the images inside the carousel track, likely triggered by the browser interpreting multi-touch or drag gestures as a pinch-to-zoom action on the image elements.

Goal

Disable the image zoom behavior on mobile for both the Portrait Card Set (carousel mode) and the Image Carousel blocks, so that swipe gestures navigate the carousel without triggering any zoom on the images.

Out of Scope

  • Changes to desktop behavior — zoom should remain unaffected on non-touch devices
  • Redesign or layout changes to either block
  • Any changes to the static 3-card grid view of the Portrait Card Set

Success Criteria

  • Swiping horizontally through the Portrait Card carousel on a mobile device does not cause images to zoom in or out
  • Swiping horizontally through the Image Carousel block on a mobile device does not cause images to zoom in or out
  • Standard pinch-to-zoom on the page level (outside the carousel) is not inadvertently disabled
  • Tested on both iOS (Safari) and Android (Chrome) at common viewport sizes

┆Issue is synchronized with this Jira Task

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions