iOS 显示的错误：flex？答案

【问题标题】：Bug with iOS render of display: flex?iOS 显示的错误：flex？
【发布时间】：2017-12-25 09:00:31
【问题描述】：

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

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

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

但是，当在我的 iPad 或 iPhone 上查看时，摘要元素会呈现为好像它是一个块或 flex-direction: 列。伪元素和每个 span 被渲染到新的一行。

我将非常相似的代码应用于具有相同跨度元素但具有空伪元素的 div。 iOS 在此实例中按预期呈现（flex-direction: row）。

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

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

SCSS

我正在使用带有所有供应商前缀的 mixins。我不会用那些把它搞得一团糟！

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（将详细信息/摘要呈现为一列）

标记

内容

【问题讨论】：

标签： ios css html flexbox

【解决方案1】：

我决定解决这个问题，而不是继续查看是否有解决方案。而不是在摘要元素上使用 display: flex 我已切换为 display: inline-block 在跨度上。

有iOS使用检测

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

鉴于我不能依赖 flex，我不得不使用一些媒体查询来确保合理的渲染。内联块跨度元素必须提前计算其宽度。

最后，flex 保留在 div 上（这些反映了摘要元素，但没有任何子元素）。

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

【讨论】：