我潜意识里早饭不叫饭，随便吃点，吃啥花样不重要，重要的是自己吃过了...

@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

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

找了个 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/

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

我的 15 款去年胀包了，300 搞了个绿巨能换上，目前没啥感觉。。

@blindie 补充在第二条附言里了，请大佬查看🥳。

@maplerecall 感谢回复，大佬说的更广色域上根据 PS 的转换确实是可以看到差距，但是并不影响在结果中有层次的显示，可以看看第一条附言的问题背景描述，不知道大佬对这种需求有没有其他的可行方法？

@blindie 标量目前想了两种方法，一种是分离 RGB 通道，根据 R 通道的灰度去做，一种是归一化，取 R 值，不知道大佬有没有别的处理方法

@blindie 感谢回复，抹平的话有个问题就是没有颜色层次感了，我想自己做个东西，就是根据一张彩色图提取其中红色的深浅图，目前也就想出来一种实现方法，就是给定一个最浅的红色值 minRed，然后根据一个标量和 minRed 来计算相应的颜色，于是使用了 HSV 颜色模型，这样起码都是红色色域，但是根据标量计算的时候有些饱和度超出了 100%

@Muniesa 理论上是的，但是 Photoshop 有个机制，如果超出了打印色域，会更改 Hue 转化成可打印色，并且前后肉眼可见差别不大，大佬可以试试。PS 给出的是 HSV(354, 100, 68) => HSV(358, 81, 64)。