similar-sc-vue-cli-plugin-safari-fix

iOS Webview 白屏修复

使用方法

npm install @sc/vue-cli-plugin-safari-fix --save-dev

安装插件后，构建过程会自动替换html

原理

往页面中填充一些内容，会使首屏渲染的时机提前 —— 经验证，这个内容必须是可见的文本（display 不为 none，visibility 不为 hidden），长度应在 201 个非空字符以上（非 tab、space 和 line-break）。

借此可以使用一个 hack，往没有高度的元素内填充大量零宽空格，就能使页面提前显示（因为可能不确定不同页面的初始内容是否足够）：

<div :style="{ height: 0 }">{{ '\u200b'.repeat(201) }}</div>

需要注意的是页面必须设置字符集为UTF-8，否则不保证渲染出的内容为空字符

<meta charset="UTF-8">