a标签,在页面初始化时,为何会先呈现原始基础样式,然后才显示正常样式?

【正在准备试卷】是个 a 标签,在页面初始化时,为何会先呈现原始基础样式(蓝色、带下划线),然后才显示正常样式?如下 gif 图。

机型:安卓多个机型
环境:公司内部 app
页面是 H5,打开方式是在 app 内部访问。

目前只在公司内部打包生成的 app 中出现该 bug,其他主流浏览器均无复现。
自己推测是 webview 渲染问题,但不知具体原因,以及解决方案。
请问有人碰到过类似问题吗?

图片描述

阅读 3.9k
3 个回答

自问自答
1、背景补充
页面采用 flexible.js 的写法。
flexible.js 在 <head> 中引入。
2、原因
flexible.js 在载入后,会判断是否有 body 标签,代码如下:

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

问题的原因就在于没有检测到<body>,所以没有在最开始设置 font-size,而是等到其他内容都载入后,才设置 font-size,导致元素放大。
3、解决方法
将flexible.js置于<body>后,其他代码前。

<body>
    <script src="flexible.js"></script>
    // other codes
</body>

问题就是在html结构加载完成后css才加载
一方面不要使用的@import方式引入的css,
另一方面要把css的引入放在html头部.

感觉像是页面渲染没有跟上路由跳转,是不是应用了懒加载的模式?可以将需要用到的CSS样式进行提前加载

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题