I as struggling to find a work-around the Safari “limitation” that stops this fading in and out the images as they change…

  html { 
    background: url(https://www.cw109eu.uk/cover1.webp) no-repeat center center fixed; 
    background-size: cover;
    -webkit-transition: background 2000ms ease-in-out 2000ms;
    -moz-transition: background 2000ms ease-in-out 2000ms;
    -o-transition: background 2000ms ease-in-out 2000ms;
    transition: background 2000ms ease-in-out 2000ms;
  }

On Edge and Chrome the background images fade in and out nicely, but on Safari it the fading doesn’t happen and I get a white blank screen in between images.

I have a CodePen available that shows my code and the effect. Try it on Edge or Chrome then on Safari and you will see what I mean – https://codepen.io/PhilCorley/pen/QWRExWd#

Can anyone help with how to fix this so it works on all modern browsers?

I would have expected Safari to conform with other browsers, which it doesn’t 🙁