bug(md-tooltip): Performance issue when ViewChild contains many instances of md-tooltip on a scrolling panel

[surajpatnaik1986]

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

md-tooltip when placed inside a grid with many rows, many instances of this components gets created which does heavy DOM manipulation when user places mouse on the element where md-tooltip is associated and does a scrolling. This finally causes the performance issue in browsers like IE11.

Solution:

User can set mdTooltipShowDelay and avoid this issue to some extend but the ideal solution would be look for scroll event and once user stop scrolling, attach tooltip to DOM

Reproduction

Steps to reproduce:

1. Create a grid using ngFor or material grid
2. place md-tooltip in a grid cell
3. make sure the grid has many records e.g. 500 (we cannot assume all users using virtual scrolling or paging)
4. open the application in IE-11 and keep the mouse on the grid cell where the md-tooltip is applied
5. do scrolling quickly

Expected Behavior

No Performance issue or browser freezing

Actual Behavior

IE11 freezes while scrolling quickly

Environment

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