util: getParentWithPointerEvents > hasComputedStyle causes forced reflow

[aman-kumayu]

AngularJS Material is in LTS mode

We are no longer accepting changes that are not critical bug fixes into this project.
See Long Term Support for more detail.

Bug Report

Explain the expected behavior

Angular material forces browser to recalculate style whenever new element is added in the dom, it should read first then write.

Explain the current behavior

Angular Material is calling function getParentWithPointerEvents > hasComputedStyle from $mdUtil which is forcing browser to recalculate style, due to which i am facing a performance lag in the system.

Discuss the use-case or motivation for changing the existing behavior

The read operation i.e. recalculate style must be done before altering DOM.

List the affected versions of AngularJS, Material, OS, and browsers

• AngularJS: 1.5.8
• AngularJS Material: 1.1.1
• OS: Any
• Browsers: Chromium 90.0.4430.72.

Screenshots