Макет идет не так, когда Safari/iPad увеличивает размер текста более чем на 175 %. ⇐ CSS

[Anonymous]

Я использую Safari на iPad Pro 12,9". Когда я использую элемент управления размером браузера, чтобы увеличить все до 200 %, h1 выскакивает за пределы содержащего его блока и оказывается под логотипом.
Техника, используемая для вертикального выравнивания по середине, взята из статьи «Как центрировать текст по вертикали с помощью CSS». В этой статье утверждается, что этот метод по-прежнему подходит для многострочного текста, который я еще не пробовал.
CSS и HTML:
header {
/* header [ [ logo ] [ h1 ] ]; */
/* https://stackoverflow.com/questions/886 ... t-with-css */
height: 122px; /* 122 x 122 logo */
line-height: 122px;
margin: 10px 0 12px;
border: 0;
padding: 0;
}

header
h1 {
display: inline-block;
vertical-align: middle;
line-height: normal;
font-size: 46px;
font-style: normal;
}

#logo-image
{
text-align: left;
/* 122 x 122 */
background: url("logo.jpg") top left no-repeat;
width: 122px;
height: 122px;
display: block;
float: left;
margin: 0 24px 0 4px;
}

/* === XHTML === */



Skye Shepherd Huts




Подробнее здесь: https://stackoverflow.com/questions/790 ... e-than-175