bug(CDK): cdk-describedby-message-container visible below application footer

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

The div with ID cdk-describedby-message-container, despite being tagged with visibility: hidden, will show as an empty white block the size of the tooltip labels it contains.

The only hack that appears to fix this is a display: none on the element ID in the application stylesheet.

Reproduction

Steps to reproduce:

1. Create an application with a footer and tooltips on multiple items
2. See CDK DescribedBy container below the application footer.

Expected Behavior

This hidden div being invisible, not taking up visible space in the rendered DOM.

Actual Behavior

The div cdk-describedby-message-container shows as an invisible div, still taking up space beneath an application footer.

Environment

• Angular: 11.1.2
• CDK/Material: 11.2.13
• Browser(s): Edge
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[crisbeto]

https://material.angular.io/guide/theming#the-core-mixin

[angular-automatic-lock-bot[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.}