bug(material/button): Components with absolutely positioned touch targets (like mat-button) can cause scrollbar to appear.

[aeslinger0]

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

Before v15. I was using 14.2.2.

Description

Some components have "touch targets" that are positioned absolutely and extend past the borders of the component itself. When one of these components is near the edge of a scrollable container, it can cause the scrollbar to appear when it shouldn't. The work-around is easy enough - just add padding, but besides throwing off your design, it can be difficult and frustrating trying to figure out why the scrollbar is appearing.

Reproduction

Steps to reproduce:

1. Create a scrollable div
2. Place a button at the bottom or right side of the div without it extending past the scrollable area.
3. Notice a scrollbar appears anyway because an element with the class mat-mdc-button-touch-target is absolutely positioned and extends past the borders of the button.

Expected Behavior

The scrollbar should not appear. The touch target should not extend past the edges of the button or should be clipped to stay within scrollable area.

Actual Behavior

A scrollbar appears because an absolutely positioned element is overlapping the scrollable element's border.

Environment

• Angular: 15.0.1
• CDK/Material: 15.0.0
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

This is working as expected. The whole point of the larger touch targets is to ensure that it's easier for the user to tap the button. You can add this to your global styles to disable them:

.mat-mdc-button-touch-target {
  display: none;
}

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}