object-fit：封面；停止处理动态添加的 <img>（Safari 错误？）

Question

我有一个奇怪的...刚刚花了几个小时试图解决 object-fit: cover; 的 Safari 错误停止处理动态添加的 img 元素。

也许有解决方法？或者也许有人知道发生了什么事？我无法理解这个。

我已经隔离了这个小测试站点中的错误： https://safaribug.000webhostapp.com/

只需在 Safari 上按“下一页”（它会加载同一页面，但会加载新的下一页 URL）。

Answer 1

您可以将其用于 CSS

#bg {
  position: fixed; 
  top: 0; 
  left: 0; 

  /* Preserve aspect ratio */
  min-width: 100%;
  min-height: 100%;

或此代码

html { 
 
 background: url(images/bg.jpg) no-repeat center center fixed; 

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

   background-size: cover;
}

}

Answer 2

如果其他人偶然发现了这个错误，对我有用的解决方案是：

检测浏览器是否为Safari
如果是，那么一旦 HTML 被放入 dom，遍历每个图像并强制它重新渲染。在我的例子中，我只是删除了 srcset 属性，然后像这样把它放回去：

    document.querySelectorAll('picture.image > img')
            .forEach($img => {
              const srcset = $img.getAttribute('srcset');
              $img.setAttribute('srcset', '');
              $img.setAttribute('srcset', srcset);
            });

这不是我想要的解决方案，但它确实有效。

object-fit：封面；停止处理动态添加的 <img>（Safari 错误？）

object-fit: cover; stops working on dynamically added <img> (Safari bug?)

html

javascript

css

safari