前端大佬帮忙看看这是啥问题

[Macv1994]

用的 bootstrap4 UI 库，导航栏在安卓系统上显示正常，如下图

到了 mac 上，不管是 Safari 还是 edge 或是 chorme 导航栏样式都是错误的如下图，实在是找不出什么原因，没有 Mac 只有一个 iPad 不知道怎么调试，请教各位前端大佬

[proger]

老哥好像没什么问题 safari edge chrome 都试了
https://sm.ms/image/cFpEPGQD1q6difM

[PinkRabbit]

没 Mac，网页都正常，看不出来哈哈哈哈

[Macv1994]

@proger 😭😭😭

[Macv1994]

@proger 为什么在 iPad 上看就我图片那样😭😭

[zinco]

看起来是像包 blogin 的盒子清除浮动失效了，没有调试工具只能是猜测，要解决只能慢慢调了，或者降版本试试？

[Hslacker]

https://v4.bootcss.com/docs/examples/sticky-footer-navbar/
不找了，你按这个重搞一个就好了

[Macv1994]

@Hslacker 好的 我早晚上回去试试看 谢谢啦

@734694671 可能是吧，为什么就苹果系统上会失效呢 奇怪😭😭 谢谢啦

[Hslacker]

问题是处在 base.css, body 的 display：flex 上面
@Macv1994

[Macv1994]

@Hslacker 这个我好像是用来固定 footer 用的 footer 一直固定在页面底部 我晚上回去改改看看 谢谢你啦

[litel]

mac 上的 safari 和火狐都一切正常

[rf99wSiT6IxH1Z23]

图床应用吗？

[Macv1994]

@litel 谢谢啦 好像是移动端不正常 iPhone 或者 iPad 可以用 iOS 系统试一下吗？

@cnscorpions 个人博客网站啦

[Alives]

倒是发现个别的样式问题，在 Chrome iPad 模式下 或者 屏幕宽度小于 992px 的时候，Github 的状态信息栏因为没换行导致超出边框了，可以用 `flex-wrap: wrap;` 来换行。
https://sm.ms/image/KDTFjNwx4J2Ch61

[Macv1994]

@Alives 嗯嗯，这个我也发现了。用控制台调试导航栏显示是正确的，但是到了真实设备上就像我那个图片一样 谢谢啦

[bearboss]

可能是因为 ipad 的导航栏会自动缩起 导致窗口尺寸变化导致的？之前适配 ipad 端遇到 不知道是不是同个问题 没细看

[Macv1994]

@bearboss 我也不清楚 主要是没办法调试 [可怜]

[jackrebel]

貌似是正常的啊。

[Alives]

找了个 iPad 试了试，.navbar 中加上 `flex: none;` 就好了，发生这种现象的布局：
1. 父元素是 flex 布局 column 排列，并且父元素高度为 100%
2. 子元素有多个，一个 flex: 1，其他子元素未设置 flex，暂叫 flex: 1 的元素为 main
3. 当 main 的子元素超出 flex 布局分配的高度，这时 main 被子元素撑高

NOTE: 现象仅在 iPad Safari 真机上有，Mac Safari 弹性模式都模拟不出来

我猜：main 被子元素撑高后，作为 flex 弹性布局，nav 被作为压缩对象，在 iPad Safari 下高度被压缩成 0 (其他环境均有高度)，只留下了 nav 子元素的样式高度，`flex: none;` 可以避免被压缩。

当然只是我猜，真正具体原因还是得靠真大佬... 我也蹲个坑。

以下是简易的复现代码：
https://github.com/Aliveing/odd-safari-flex-issue/blob/main/code.html

现象查看：
https://aliveing.github.io/odd-safari-flex-issue/

[Macv1994]

@Alives 老哥你就是大佬啊，真的有效啊，哈哈哈~十分感谢！ 这问题困扰我很久了，但是为什么就 iPad 或者 iPhone 上面会有这种情况呢？其他的为什么不是这样？ 膜拜大佬~~~

[Alives]

@Macv1994 能帮上忙就好😄，我也要蹲个大佬来解答下，iPhone 的 Safari 我测试的是没这个问题，仅在 iPad 上有，虽说都是 webkit 内核，我猜可能 iPad 上 Safari 对于 flex 布局计算有点问题，具体的还真不清楚，希望有 css 渲染的大佬来瞅瞅，让我们涨涨知识🥳。

[Macv1994]

@Alives 哈哈哈哈 很感谢 iPhone8 上显示是错误的 不知道是不是系统的原因

[Alives]

@Macv1994 今天测试了下，还真像你说的和 iOS 系统有关系，结论是 iOS 14.4 以前的版本都有问题，昨天测试的是 14.3 的 iPad Pro 设备和 14.4 的 iPhone 8 Plus，用虚拟机跑了一遍 14.3 版本的 Safari 全部有问题，14.4 已经修复了，你把 iPhone8 升级到 14.4 应该也会好 😂 ，不过 iOS 14.4 的更新日志上没看到 Safari 相关更新，估计这个问题是被默默修复了。

iOS14.3 和 iOS 14.4 现象对比： https://sm.ms/image/j2dDuWYkoIHm4Ay

iOS 更新日志： https://support.apple.com/zh-cn/HT211808

[bmwh123]

https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex
可以看看下面的 flex 取值 默认是 initial 嘛
initial
元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器 。相当于将属性设置为"flex: 0 1 auto"。
auto
元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 "flex: 1 1 auto".
none
元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为"flex: 0 0 auto"。

[Macv1994]

@Alives 嗯嗯 已经按照你的方式修改好了 代码也推上去了 哈哈哈 感谢大佬

[Macv1994]

@bmwh123 嗯 感谢啦