Allow mobile pinch to zoom of website on carousel. #1021
Closed
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Widgets that disrupt ordinary touch gestures on a mobile device are frustrating. For example, users may want to zoom in on a slide slightly or correct an already zoomed-in state using gestures on top of the carousel component. Unfortunately, the carousel acts as a dead zone, neutralizing the pinch-to-zoom gesture if even one finger of the gesture is inside the component.
This patch causes the carousel to only react to single touch gestures, which is essential so pinch to zoom will not simultaneously drag the slide. It also adds
pinch-zoom
to thetouch-action
style, enabling global pinch zooming.Fixes #1020
Type of Change
How Has This Been Tested?
Connect an iPhone 13 Pro Max to the development web server. Used manual testing for the following:
Ideally, this would include a Cypress test, but I need help figuring out how to simulate compelling touch actions there.
Checklist
pnpm run lint
)pnpm run test:ci-with-server
/pnpm run test
)pnpm changeset
.