javascript - 如何调试不适用的 CSS 转换

Question

只是为了上下文，可能并不重要：我正在使用@angular/material. 我有一个mat-tab组件，其中使用*ngIf. 有时，选项卡的内容在选择时不可见。div.mat-tab-body-content仍然有transform: translate3d(-100%, 0px, 0px)申请，因此在一个overflow: hidden领域。有时 -> 我无法找到真正的模式，因此无法构建一个最小的例子来说明这种情况。

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

但是不应用内联样式。

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

在 Chrome Devtools 中，查看我也没有找到并回答的计算样式，我唯一注意到的是设置 transformnone!important实际有效（直到!important再次被删除）：

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

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()返回一个空数组。所以这似乎也不是解决方案。

4. 重要作者声明
5. 动画声明 [css-animations-1]
6. 正常作者声明

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

标签： javascriptcssangulargoogle-chromecss-transforms