Блог

Просто для контекста, вероятно, не очень важно: я работаю над использованием приложения Angular @angular/material . У меня есть mat-tab компонент, в котором некоторые вкладки добавляются / удаляются с помощью *ngIf . Иногда содержимое вкладки не отображается при выборе. div.mat-tab-body-content все еще transform: translate3d(-100%, 0px, 0px) применяется и, следовательно, находится в overflow: hidden области. Иногда -> Я не могу найти реальный шаблон и, следовательно, не могу создать минимальный пример того, как это происходит.

Вкладки перемещаются влево / вправо при переключении вкладок с помощью перехода. После завершения перехода обновляется встроенный стиль added: transform: none (was: transform: translate3d(-100%, 0px, 0px) ).

Однако встроенный стиль не применяется.

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

В Chrome Devtools, просматривая вычисляемые стили, я тоже не нахожу и не отвечаю, единственное, что я заметил, это то, что настройка transform на none!important самом деле работает (пока !important снова не будет удалена):

Если я заменю innerHTML родительского узла исходным HTML-кодом, я получу 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.