如何调试不适用的CSS转换

问题描述

仅就上下文而言，可能并不十分重要：我正在使用@angular/material开发Angular应用程序。我有一个mat-tab组件，其中使用*ngIf添加/删除了一些标签。有时，选项卡的内容在选中时不可见。 div.mat-tab-body-content仍应用transform: translate3d(-100%,0px,0px)，因此位于overflow: hidden区域中。 有时->我找不到真正的模式，因此无法建立这种情况的最小示例。

使用过渡切换选项卡时，选项卡向左/向右滑动。过渡完成后，将更新内联样式：transform: none（原为transform: translate3d(-100%,0px)）。

但是没有应用内联样式。

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

在Chrome Devtools中，查看我也找不到并回答的计算样式，我注意到的唯一一件事就是将transform设置为none!important实际上有效（直到!important被再次删除）：

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

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

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

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

我无法找到影响此操作的DOM节点的任何其他内部状态，也不知道如何进行。还有其他因素可以影响/设置我可以查看的DOM节点上的转换吗？

编辑-已检查的更多内容： https://www.w3.org/TR/css-cascade-4/#cascade-origin定义样式的应用顺序。 4、5和6似乎特别有趣。使我的作者声明成为重要的作者声明适用此样式。两者之间唯一的关系是：动画声明。 没有定义CSS动画，另外el.getAnimations()返回一个空数组。因此，这似乎也不是解决方案。

1. 重要的作者声明
2. 动画声明[css-animations-1]
3. 普通作者声明

这可能是Chrome中的错误吗？至少发生在84和86。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）