supportWebp 方法导致某些浏览器闪现一个 "!" 符号

[ufologist]

现象

在某些浏览器上(具体有哪些未做全面测试), 页面会出现一个 "!" 符合, 然后又消失了.

重现这个 bug 的手机为: iPhone 6 Plus iOS 8.3

浏览器的 UA 信息为:
Mozilla/5.0 (iPhone; CPU iPhone OS 8_3 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12F70

PS: 我们的 webview 用的是 UIWebView, 比较老式

排查问题

为了排查这个诡异的问题, 把代码翻了个遍, 从 install 入口开始, 一个个组件排查, 然后定位在 Lazyload 组件, 最终定位在 src/utils/common.js#supportWebp

    let el = d.createElement('object')
    el.type = 'image/webp'
    // --------------------
    // 就是这个诡异的 "!" 符号会在页面上闪现一下
    el.innerHTML = '!'
    // --------------------
    d.body.appendChild(el)
    support = !el.offsetWidth
    d.body.removeChild(el)

虽然在很多浏览器上都不会闪现出 "!" 符号, 但我们确实碰到了这个问题, 希望改进下方式, 例如给这个元素添加一个透明度的样式, 让其添加到页面时不会显示出来.