У меня проблема с сеткой CSS, которая возникает только в MacOS Safari (тестирование на v13.1). Следующий фрагмент должен привести к label и textfield - при этом последний распространяется на всю ширину контейнера div. Это работает в Chrome и Firefox, но Safari просто не сделает этого. Интересно, что макет защелкивается на месте при изменении размера окна, но снова ломается при фокусировке текстового поля.
<html>
<head>
<title>Test</title>
<style type="text/css">
body {
display: flex;
flex-direction: column;
overflow: hidden;
}
div {
background-color: lightcoral;
display: grid;
grid-template-columns: auto 1fr;
align-items: baseline;
}
</style>
</head>
<body>
<div>
<label>Label</label>
<input type="text" placeholder=" ">
</div>
</body>
</html>
CodePen
При удалении display или overflow свойство из тега body макет сетки работает как положено. Но оба свойства требуются в среде, где возникает эта проблема. Следовательно, проблема не может быть решена путем удаления этих свойств. Проблема также исчезает при изменении align-items на что угодно, кроме baseline. К сожалению, выравнивание baseline также является ключом для желаемого макета.
Такое поведение мне кажется ошибкой в Safari, но я, хотя и хотел бы спросить второе мнение. Если есть решение, я был бы рад, если бы вы могли поделиться им.
Кстати: пустой placeholder с одним пробелом уже является исправлением для выравнивания baseline в Safari. Без этого пустые текстовые поля будут выровнены внизу, а не их baseline.