components icon indicating copy to clipboard operation
components copied to clipboard

bug(Tooltip): Prevents touch scrolling

Open peterjosling opened this issue 3 years ago • 0 comments

Is this a regression?

  • [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Duplicate of (closed) https://github.com/angular/components/issues/4892

MatTooltip triggers with matTooltipTouchGestures set to auto (default) or on break page scrolling on touch devices. When set to either of these values the directive sets touch-action: none on the trigger, which breaks native page scrolling.

On a page with many tooltip triggers (e.g. dense links) it can be difficult to scroll the page at all.

Setting matTooltipTouchGestures to off fixes scrolling, but makes tooltips inaccessible on touch devices.

Reproduction

Reproduction taken from https://github.com/angular/components/issues/4892#issuecomment-832516128

Steps to reproduce:

  1. Open https://stackblitz.com/edit/angular-ylctyk on a touch device (phone, touch laptop) in Chrome
  2. Scroll the page by initiating a touch on the white background
  3. Attempt to scroll the page by initiating a touch on the black box

Expected Behavior

Page scrolls

Actual Behavior

Page does not scroll

Environment

  • Angular: Latest Google-internal version
  • CDK/Material: Latest Google-internal version
  • Browser(s): Chrome 104
  • Operating System (e.g. Windows, macOS, Ubuntu): Android

peterjosling avatar Sep 01 '22 13:09 peterjosling