How to debug CSS transform that does not apply

Viewed 197

Just for context, probably not really important: I am working on an Angular application using @angular/material. I have a mat-tab component where some tabs are added / removed using *ngIf. Sometimes the content of a tab is not visible when selected. div.mat-tab-body-content still has transform: translate3d(-100%, 0px, 0px) applied and is therefore in an overflow: hidden area. Sometimes -> I'm unable to find a real pattern and therefore unable to build a minimal example of this happening.

Tabs slide left / right when switching tabs using a transition. After the transition is completed an inline style is updated added: transform: none (was: transform: translate3d(-100%, 0px, 0px)).

The inline style is not applied however.

el.computedStyleMap().get('transform'); // [CSSTranslate]
el.style.transform; // = none

enter image description here

In Chrome Devtools, looking at computed styles I don't find and answer either, the only thing I noticed is that setting transform to none!important actually works (till !important is being removed again):

enter image description here enter image description here

If I replace innerHTML of the parent node with the original HTML code I get a DOM where transform is actually none as expected (as it was inline style):

el.parentNode.innerHTML = el.parentNode.innerHTML; /* Looks right */

However when I reattach the original node I can observe the original behavior. A clone of the node is working fine again

someParent.appendChild(el); /* el has still translate3d applied */
var newNode = el.cloneNode(true); 
el.parentNode.appendChild(newNode); /* newNode behaves as expected */

I'm unable to find any other internal state of the DOM node that is affecting this and have no idea on how to proceed. Are there any other factors that can influence / set transform on a DOM node that I could look at?

Edit - more things that have been checked: https://www.w3.org/TR/css-cascade-4/#cascade-origin defines the order in which styles should be applied. 4, 5 and 6 seem to be especially interesting. Making my author declaration an important author declaration applies the style. The only thing in between would be: Animation declarations. There is no css animation defined, additionally el.getAnimations() returns an empty array. So this does not seem to be the solution either.

  1. Important author declarations
  2. Animation declarations [css-animations-1]
  3. Normal author declarations

Is this maybe a bug in Chrome? Happening on 84 and 86 at least.

0 Answers
Related