如何修复文本冒险游戏中main与footer div之间随机出现的撕裂问题

问题诱因 #

• 核心诱因是main元素使用了flex-direction: column-reverse属性，该属性实现反向滚动时依赖浏览器对内容做偏移渲染，滚动过程中极易出现子像素计算误差，导致两个相邻同背景元素之间漏出底层背景，视觉上表现为撕裂线。
• 其次你使用了vh作为高度单位，搭配em单位的padding，不同设备下单位换算后容易出现非整数的高度值，main和footer的高度加总后和父容器高度存在小于1px的间隙，滚动时渲染误差会把这个间隙暴露出来。
• 两个元素属于独立渲染层，滚动时main的偏移值和footer的固定位置出现半像素差，也会触发该问题。

可行修复方案 #

• 最简易无副作用方案：给包裹main和footer的外层父元素设置和二者相同的白色背景background-color: rgb(255,255,255)，就算出现间隙也会被同色背景盖住，完全不影响现有样式逻辑。
• 根因修复方案：移除main的flex-direction: column-reverse属性，改为内容正常正向排列，每次新增故事文本后通过JS主动将滚动条定位到底部，示例代码：document.querySelector('main').scrollTop = document.querySelector('main').scrollHeight，彻底避开反向flex的渲染缺陷。
• 补丁式修复方案：给main添加1px同背景色下边框border-bottom: 1px solid #fff，或给footer添加1px同背景色上边框，直接覆盖可能出现的间隙。
• 保留现有布局的修复方案：不要给单个元素加transform属性，改为给包裹main和footer的外层元素添加will-change: transform属性，让浏览器将两个元素放到同一个合成层渲染，避免滚动时不同层的偏移误差，不会影响box-shadow等样式效果。
• 单位适配方案：将固定vh高度改为外层容器统一分配高度，比如外层设置height: 62vh，内部main设flex: 32、footer设flex: 30，让浏览器自动计算高度，避免子像素差值。

内容的提问来源于stack exchange，提问作者Savien