I am attempting to create a fairly simple animated carousel using CSS. Each image should appear with a wipe from left to right. It is working fine in Safari and Chrome, but Firefox seems to be ignoring background-attachment:fixed, causing the animation to not work as expected (see images below).

I've seen some other posts about background-attachment:fixed not working in Firefox when combined with transitions, but have not yet found a solution. My code is as follows:

.carousel {
    position:relative;
    height:100%;
    width:100%;
    overflow: hidden;
    margin-left: -10px;
    z-index: -1;

}

.image {
    
    background-size: 83%;
    background-attachment:fixed;
    background-repeat: no-repeat;
    position: absolute;
  
    top:0;
    bottom:0;
    right:0;
    left:0;

    transform-origin: center;
    background-position: right 0;
    
    z-index:0;
}

.image.selected {
    
    animation:swipe 2.5s ease-out;
    z-index:10;
   
}

.image.previous {
    z-index:5;
}

@keyframes swipe {
    
    0% { 
        transform: scale(1.4);
        filter: blur(2px);
        -webkit-filter: blur(2px);
        
        height:100%;
        width:0%;
        
    }

    60% {
        filter: blur(0px);
        -webkit-filter: blur(0px);
    }

    85% {
        height:100%;
        width:100%;
    }
    
    100% {  
        transform: scale(1);
    }
}

Any suggestions/solutions would be greatly appreciated!

CodePudding user response：

your code is correct.

i use firefox but its work.

CodePudding user response：

If you want to keep your Firefox version up to date, you need to upgrade your operating system to macOS 10.12 or higher. Apple does not support older versions. They are unreliable and unsafe to use, which also makes it difficult to maintain Firefox on those versions.