Safari 中未应用最大高度

Question

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

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 为我指出了可能解决我的问题的方法。我的代码是 "working" 但由于 webkit 的错误，它在任何 webkit 浏览器上都无法（以前）工作。现在显然这是固定的，但我认为错误仍然存在。所以我决定尝试跳过相邻的兄弟选择器 + 并只使用通用兄弟选择器 ~ （这是上周五在 iOS 上工作时和现在之间发生的变化当它不是）。问题（以及我最初切换到相邻选择器的原因）是我在每一页上都有不止一个这样的选择器。为了解决这个问题，我使用了一个通用选择器和 :first-of-type 伪 class 来确保我只得到列表中的第一个元素。在这种情况下，它恰好有 .drawer. class.

tl;dr

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

Safari 中未应用最大高度

Max Height Not Applied in Safari

html

css

iphone

ios

css-transitions