Принудительная перерисовка/обновление DOM в Chrome/Mac
Время от времени Chrome неправильно или вообще не отображает совершенно корректный HTML/CSS. Часто достаточно покопаться в инспекторе DOM, чтобы он понял ошибку и перерисовал правильно, так что можно с уверенностью сказать, что разметка хорошая. Это происходит достаточно часто (и предсказуемо) в проекте, над которым я работаю, поэтому я установил код, заставляющий перерисовывать разметку в определенных обстоятельствах.
Это работает в большинстве комбинаций браузера и операционной системы:
el.style.cssText += ';-webkit-transform:rotateZ(0deg)'
el.offsetHeight
el.style.cssText += ';-webkit-transform:none'
Например, подстроить какое-то неиспользуемое свойство CSS, затем запросить какую-то информацию, которая заставит перерисовать разметку, а затем убрать это свойство. К сожалению, команда разработчиков Chrome для Mac, похоже, нашла способ получить этот offsetHeight без перерисовки. Таким образом, полезный в других отношениях хак был уничтожен.
Пока что лучшее, что я придумал для получения того же эффекта в Chrome/Mac, - это вот это уродство:
$(el).css("border", "solid 1px transparent");
setTimeout(function()
{
$(el).css("border", "solid 0px transparent");
}, 1000);
То есть, фактически заставить элемент немного подпрыгнуть, затем остыть на секунду и подпрыгнуть обратно. Что еще хуже, если вы уменьшите таймаут до 500 мс (чтобы это было менее заметно), это часто не даст желаемого эффекта, поскольку браузер не успеет перерисовать элемент до того, как он вернется в исходное состояние.
Кто-нибудь может предложить лучшую версию этого хака перерисовки/обновления (желательно основанную на первом примере выше), которая работает на Chrome/Mac?
1 ответ
Ниже css работает для меня в IE 11 и Edge, JS не требуется. scaleY(1) добивается цели здесь. Кажется, самое простое решение.
.box {
max-height: 360px;
transition: all 0.3s ease-out;
transform: scaleY(1);
}
.box.collapse {
max-height: 0;
}