Javascript 如何调试不适用的CSS转换

仅用于上下文，可能并不重要：我正在使用

@Angular/material

开发一个角度应用程序。我有一个

mat tab

组件，其中一些选项卡是使用

*ngIf

添加/删除的。有时，选项卡的内容在选中时不可见

div.mat-tab-body-content

仍然应用了

transform:translate3d（-100%，0px，0px）

，因此处于

溢出：隐藏的
区域。
有时->我无法找到一个真正的模式，因此无法构建这种情况的最小示例

使用转换切换选项卡时，选项卡向左/向右滑动。转换完成后，将更新内联样式并添加：
transform:none
（was:
transform:translate3d（-100%，0px，0px）
）

但是，不应用内联样式

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


在Chrome开发工具中，查看我也没有找到和回答的计算样式，我注意到的唯一一件事是将transform设置为
none！重要信息
实际有效（直到再次删除重要信息）：



如果我用原始HTML代码替换父节点的innerHTML，我会得到一个DOM，其中转换实际上没有预期的效果（因为它是内联样式）：

但是，当我重新连接原始节点时，我可以观察原始行为。节点的克隆再次正常工作

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

我找不到DOM节点的任何其他内部状态影响这一点，也不知道如何继续。有没有其他因素可以影响/设置DOM节点上的转换，我可以看看

编辑-已检查的更多内容：
定义应用样式的顺序。4、5和6似乎特别有趣。使我的作者声明成为重要的作者声明将应用该样式。两者之间的唯一区别是：动画声明。
没有定义css动画，另外
el.getAnimations（）
返回一个空数组。因此，这似乎也不是解决办法

重要作者声明
动画声明[css-animations-1]
正常作者声明
这可能是Chrome中的一个bug吗？至少在84和86发生。
此行为在应用程序中有何影响？您的某个动画是否未按预期工作？它是包含当前活动选项卡的选项卡内容的
div.mat-tab-body-content
。当元素100%向右转换时，它位于
mat选项卡主体
元素之外，该元素具有
溢出：隐藏
使选项卡内容不可见。仅对一个
div.mat-tab-body-content
元素发生。与此材质选项卡示例中的标记相同
someParent.appendChild(el); /* el has still translate3d applied */
var newNode = el.cloneNode(true); 
el.parentNode.appendChild(newNode); /* newNode behaves as expected */