最大高度未在 Safari 中应用

Question

我正在使用复选框和标签来构建手风琴菜单。调整大小后，我可以在安卓设备和大多数浏览器中使用它，但由于某种原因，它无法在桌面或 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;
}

正如我所说...如果将所有浏览器的大小调整为正确的媒体查询以及在 Android 上，此代码在所有浏览器上都可以正常工作。当我将我的 iPhone 插入计算机并通过控制台查看时，我可以找到应用 CSS 的位置（最大高度更改），但在计算部分它仍然显示 max-height: 0;

编辑：

直到今天我才意识到这一点，但这个问题也出现在桌面版 Safari 上。最奇怪的部分是我可以在检查器中看到正在应用 max-height 但计算仍然显示 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;
}