html - Safari 中未应用最大高度

Question

我正在使用复选框和标签来构建 Accordion 菜单。我让它在安卓设备和大多数浏览器上工作，当它调整大小时，但由于某种原因，它不能在桌面或 iOS 设备上的 Safari 上工作。上周五它在工作，现在它不是，即使我找不到任何会发生冲突的东西。这是必要的代码。

HTML

<input type='checkbox' class='hide' name='custom_tailored' id='custom_tailored' />
<h1 class='dot-bor'><label for='custom_tailored'>Custom Solutions</label></h1>
<ul class='drawer'>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

CSS

.drawer {
    display: block;
    height: auto;
    max-height: 0;
    overflow: hidden;
    transition: all 500ms ease-in-out; /* plus vendor prefixes */
}
.hide:checked + .dot-bor + .drawer {
    max-height: 2500px;
}

正如我所说...如果将所有浏览器的大小调整为正确的媒体查询，那么这段代码在所有浏览器上都可以正常工作，在 andriod 上也一样。当我将 iPhone 连接到计算机并查看控制台时，我可以找到应用 CSS 的位置(最大高度发生变化)，但在计算部分它仍然显示 max-height: 0;

编辑:

我直到今天才意识到，但这个问题也出现在桌面版 Safari 上。最奇怪的部分是我可以在检查器中看到正在应用最大高度但计算仍然显示 max-height: 0; 但是如果我取消选中 max-height然后在检查器中再次检查它突然应用了样式。

问题可以在voicepad.com.mm-dev.net看到在 safari 中以响应式浏览器大小。

Answer 1

This link为我指明了可能解决我的问题的道路。我的代码是“有效的”，但由于 webkit 的错误，它(以前)在任何 webkit 浏览器上都不起作用。现在显然这是固定的，但我认为错误仍然存​​在。所以我决定尝试跳过相邻的兄弟选择器 + 并只使用一般的兄弟选择器 ~ (这是上周五在 iOS 上工作时发生的变化而现在不是)。问题(以及我最初切换到相邻选择器的原因)是我在每一页上都有不止一个这样的选择器。为了解决这个问题，我使用了一个通用选择器和 :first-of-type 伪类来确保我只得到列表中的第一个元素。在这种情况下，它恰好有 .drawer. 类。

tl;dr

input.hide:checked ~ label.trigger ~ .drawer:first-of-type,
input.hide:checked ~ .dot-bor ~ .drawer:first-of-type {
    max-height: 2500px !important;
}