Post #247

和 @hejiyan 研究了一下 iOS 26 的 Safari/WebKit 的两个坑： 1. 在 https://t.me/SmartHypercube_channel/172 中我推荐了 text-wrap: pretty 这个 CSS 属性，标准是允许浏览器灵活实现的，但之前据我观察各浏览器都是很简单地通过提前换行避免最后一行只有一个字/词。WebKit 最近搞了一套更精致的排版算法[1]，打开 text-wrap: pretty 时英文排版确实更好一些（图 1：关；图 2：开），但中文排版会过早换行（图 3：关；图 4：开）。 paper.dou.ac 暂时改成了只给英文文本打开 text-wrap: pretty，以及给大段英文文本再加了个 text-align: justify，看起来好像不错。 2. 之前各移动端浏览器基本都有这个性质：网页可以简单地认为自己有一个（尺寸会变的）矩形画布，画布内没有任何遮挡/穿孔/灵动岛，画布外不会渲染任何内容（除非网页使用 viewport-fit=cover 等方式主动要求渲染到更大范围）。iOS 26 的 Safari 打破了这个假设[2]，使得排版时尺寸相关的一些概念复杂了，例如图 5 中一个 position: fixed; inset: 0 的框居然无法遮住背后的所有内容，上下会透出来。暂时改成了为背后的内容设置 visibility: hidden。 [1]: https://webkit.org/blog/16547/better-typography-with-text-wrap-pretty/ [2]: https://stackoverflow.com/questions/79753701/ios-26-safari-web-layouts-are-breaking-due-to-fixed-sticky-position-elements-g