可能是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

您可以通过添加最小高度来修复它：525px;到nav ul li ul element。它滚动不正确，因为ul的位置是绝对的，这会导致ul不能展开其所在的容器。通过添加最小高度，可以确保该容器至少与菜单一样高。

Answer 2

这是我想出的最好的解决方案。

Codepen。

startTimestamp = (long) queryDocumentSnapshots.getDocuments().get(queryDocumentSnapshots.size() - 1).get("timestamp");

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);
}