可能的Safari bug？计算透视动画下拉菜单的错误高度

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

您可以通过添加min-height来修复它：525px;导航ul li ul元素。它没有正确滚动，因为ul是绝对定位的，这会导致ul不扩展它所在的容器。通过添加最小高度，它确保容器至少与菜单一样高。

Answer 2

这是我提出的最佳解决方案。

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>