Я пытаюсь исправить ошибку рендеринга в Safari и его реализациях webkit (iOS Chrome и т. Д.) На iOS.
Когда родительский элемент настроен на отображение: flex, а его дочерние элементы настроены на отображение: grid, любые элементы flex-grow, заданные для дочерних элементов, игнорируются после transform: rotate. Дочерние элементы начинаются с правильного размера, а затем отображаются на неправильной высоте после завершения преобразования.
Несмотря на то, что я справился с несколькими обходными путями, которые включают отмену установки свойства display: flex и последующего сброса его после задержки, это решение вызывает мерцание, а также влияет на браузеры, которые правильно отображают код.
Пока у меня есть отдельный пример ошибки в jsfiddle:
https://jsfiddle.net/Ja07sj/cs3rut1v/4/
$(".add_transform").click(function() {
$("#flex-container").toggleClass("transform")
});
* {
box-sizing: border-box;
transition: all 2s;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
#flex-container {
width: 50vw;
height: 90vw;
display: flex;
flex-direction: column;
border: 1px solid blue;
background-color: grey;
padding: 5px;
}
.interior {
width: 100%;
background-color: pink;
border: 1px solid red;
padding: 5px;
display: grid;
}
#flex-container.transform {
transform: rotateZ(1deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<button class="add_transform">Add transform</button>
<div id="flex-container" class="transform">
Flex Container
<div class="interior" style="flex-grow:10;">
Interior with display:grid
</div>
<div class="interior two" style="flex-grow:20;">
Interior with display:grid
</div>
</div>
</body>
</html>
И гораздо более сложная версия ошибки здесь:
http://chs2.japong.site/stack-page-test-2/#3
Оба потребуютустройство iOS (или, возможно, Mac с Safari, не способным в данный момент тестировать это оборудование) для просмотра некорректного рендеринга.
Chrome / Firefox / Edge результат:
iOS Safari (webkit) результат: 
Визуализация на iOS должна выглядетьтак же, как в Chrome / Firefox / Edge для настольных ПК и Android. Будем благодарны за любые объяснения причин, вызывающих ошибку, или для обхода более согласованного стиля в браузерах.