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

Question

I have a weird one... Just spent hours trying to tackle a Safari bug where object-fit: cover; stops working on a dynamically added img elements.

Maybe there is a workaround? Or maybe someone has any idea what is going on? I am unable to wrap my head around this one.

I have isolated the bug in this small test site: https://safaribug.000webhostapp.com/

Just press Next page on Safari (it loads the same page just with a new next page URL).

Answer 1

If anyone else stumbles open this bug, the solution that worked for me was to:

• Detect if the browser is Safari
• If it is, then once the HTML was put to the dom, loop through each image and force it to re-render. In my case I just removed srcset attribute and put it back again like so:

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

Not a solution I was looking for, but it works.

Answer 2

you can use this for CSS

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

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

or this code

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;
}

}