Возможная ошибка Safari? Вычисление неправильной высоты перспективы анимированного выпадающего меню

Question

Safari не может рассчитать правильную высоту моего выпадающего меню.

Я не могу понять, в чем может быть проблема, это ошибка кода или ошибка в Safari?

Проблема иллюстрирована анимированным GIF ниже.

Один из возможных способов взлома, а не решения, - удалить list-style: none; и заменить его прозрачным изображением.Это заставит Safari вычислить правильную высоту.

Вот ссылка на Codepen

nav {
	font-size: 13px;
	background: black;
}

nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

nav a {
	color: #ffffff;
}

nav > ul {
	perspective: 2000px;
}

nav > ul > li {
	position: relative;
}

nav ul li ul {
	position: absolute;
	left: -9999px;
	transform-style: preserve-3d;
	transform: rotateX(-50deg);
	transform-origin: 0 0;
	transition: transform .25s;
	top: 100%;
	background: black;
}

nav ul li:hover ul {
	left: 0;
	transform: rotateX(0);
}

<nav>
  <ul>
    <li>
      <a href="index.php">Main</a>
      <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
        <li><a href="#">Item 6</a></li>
        <li><a href="#">Item 7</a></li>
        <li><a href="#">Item 8</a></li>
        <li><a href="#">Item 9</a></li>
        <li><a href="#">Item 10</a></li>
        <li><a href="#">Item 11</a></li>
        <li><a href="#">Item 12</a></li>
        <li><a href="#">Item 13</a></li>
        <li><a href="#">Item 14</a></li>
        <li><a href="#">Item 15</a></li>
        <li><a href="#">Item 16</a></li>
        <li><a href="#">Item 17</a></li>
        <li><a href="#">Item 18</a></li>
        <li><a href="#">Item 19</a></li>
        <li><a href="#">Item 20</a></li>
        <li><a href="#">Item 21</a></li>
        <li><a href="#">Item 22</a></li>
        <li><a href="#">Item 23</a></li>
      </ul>
    </li>
  </ul>
</nav>

Answer 1

Это было лучшее решение, которое я придумал.

Codepen .

nav {
	background: black;
}

nav ul {
	margin: 0;
	padding: 0;
}

nav a {
	font-size: 13px;
	color: #ffffff;
}

nav > ul {
	perspective: 2000px;
	display: flex;
}

nav > ul > li {
	position: relative;
	font-size: 0px;
}

nav ul li ul {
	position: absolute;
	left: -9999px;
	transform-style: preserve-3d;
	transform: rotateX(-50deg);
	transform-origin: 0 0;
	transition: transform .25s;
	top: 100%;
	background: black;
}

nav ul li:hover ul {
	left: 0;
	transform: rotateX(0);
}

<nav>
  <ul>
    <li>
      <a href="index.php">Main 1</a>
      <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
        <li><a href="#">Item 6</a></li>
        <li><a href="#">Item 7</a></li>
        <li><a href="#">Item 8</a></li>
        <li><a href="#">Item 9</a></li>
        <li><a href="#">Item 10</a></li>
        <li><a href="#">Item 11</a></li>
        <li><a href="#">Item 12</a></li>
        <li><a href="#">Item 13</a></li>
        <li><a href="#">Item 14</a></li>
        <li><a href="#">Item 15</a></li>
        <li><a href="#">Item 16</a></li>
        <li><a href="#">Item 17</a></li>
        <li><a href="#">Item 18</a></li>
        <li><a href="#">Item 19</a></li>
        <li><a href="#">Item 20</a></li>
        <li><a href="#">Item 21</a></li>
        <li><a href="#">Item 22</a></li>
        <li><a href="#">Item 23</a></li>
      </ul>
    </li>
    <li>
      <a href="index.php">Main 2</a>
      <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
      </ul>
    </li>
  </ul>
</nav>

Answer 2

Вы можете исправить это, добавив min-height: 525px; к элементу nav ul li ul. Он не прокручивается должным образом, потому что ul находится в абсолютном положении, что приводит к тому, что ul не расширяет контейнер, в котором он находится. Добавляя минимальную высоту, он гарантирует, что контейнер будет по крайней мере таким же высоким, как и меню.