ios - 显示 : flex? 的 iOS 渲染错误

Question

我正在使用 HTML5 显示和摘要元素。我使用自定义标记作为::before 伪元素。 summary 元素最多可以包含 2 个 span 元素。

我已将 display: flex(或 display: inline-flex)规则应用于摘要元素。

FF 和 chrome 完全按照预期呈现摘要元素 - 单行，我可以使用 flex 控制伪元素和跨度元素的宽度。

但是当在我的 iPad 或 iPhone 上查看时，summary 元素被呈现为一个 block 或 flex-direction: 列。伪元素和每个跨度被渲染到一个新行上。

我将非常相似的代码应用于具有相同 span 元素但具有空伪元素的 div。 iOS 在此实例中按预期呈现( flex 方向:行)。

我不清楚是什么导致了这种行为，而且我很难调试，因为我没有可用于开发的 iOS 设备。

<details>
 <summary>
  <span>content</span>
  <span>content</span>
 </summary>
</details>

SCSS

我正在使用带有所有供应商前缀的混合。我不会把这些和这些混在一起!

details {
 display: flex;
 flex-direction: column;
 &[open] > summary::before {
  content: '\e313';
 }
}

summary {
 display: flex; //or could be inline-flex
 flex-direction: row; //not strictly needed since this is the default
 &::before {
  content: '\315';
  flex: 0 0 $MARGIN;
  cursor: pointer;
 }
}

以下内容在 iOS 中正确呈现

div {
 display: flex; 
 flex-direction: row; 
 &::before {
  content: '';
  flex: 0 0 $MARGIN;
  cursor: pointer;
 }
}

输出 FF & chrome(将详细信息/摘要呈现为一行)

标记内容内容

iOS(将详细信息/摘要呈现为一列)

标记

内容

内容

Answer 1

我决定解决这个问题，而不是继续查看是否有解决方案。我没有在 summary 元素上使用 display: flex，而是在 span 上使用 display: inline-block。

有iOS检测使用

@supports (-webkit-overflow-scrolling: touch) {}

鉴于我不能依赖 flex，我不得不使用大量媒体查询来确保合理的渲染。 inline-block span 元素必须提前计算它们的宽度。

最后，flex 保留在 div 上(这些反射(reflect)了摘要元素，但没有任何子元素)。

如果我得到更满意的解决方案，我会在这里更新。