CODEWITHSUNDEEP
htmlioscssmobile-safaricss-animations
addMitt
addMitt

Reputation: 1021

CSS animation not always starting in iOS 8 Safari

I've made a slideshow that works by putting three inline blocks next to each other (all with the same background-image) within a slideshow container, and using translateX to move that container 33% of the way to the left/right, before looping. The three inline blocks pretty much ensures it will always look continuous and you never see a seam at the each of your screen.

The slideshow is placed into another container of its own, typical width, and overflow: hidden is used to crop the long photo strip and prevent it from stretching your browser window.

#container {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.slideshow {
    position: absolute;
    z-index: 5;
    top: 0;
    width: auto;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.slide {
    display: inline-block;
    height: 100%;
}

#about-slideshow {
    right: 0;
    -webkit-animation: slideshow-right 10s linear infinite;
    animation: slideshow-right 10s linear infinite;
}
#about-slideshow .slide {
    width: 964px;
    background: url('http://simplegrid.cochranesupply.com/images/slideshow-a.jpg') 0 0 repeat-x;
    background-size: 101%;
}

/* the animation */
@-webkit-keyframes slideshow-right {
    from {
        -webkit-transform: translateX(0);
    }
    to { 
        -webkit-transform: translateX(33.33333333333%);
    }
}
@keyframes slideshow-right {
    from {
        transform: translateX(0);
    }
    to { 
        transform: translateX(33.33333333333%);
    }
}

My problem: After looking at it thoroughly on an iPhone 5S and iPhone 6 Plus, it seems to not start sometimes. It'll just sit there. Maybe glitch out after a while. If I continue to refresh, it will sometimes run, and sometimes not. Seems completely inconsistent.

Any ideas on what could be causing this? Seems pretty simple.

Here's a CodePen that I've confirmed displays the issue on iOS Safari: http://codepen.io/arickle/pen/pvGJBM

Here's a full screen view to pull up on an iOS device for testing (remember, keep refreshing until it stops--you don't have to refresh particularly fast or anything): http://codepen.io/arickle/full/pvGJBM/

Upvotes: 2

Views: 5013

Answers (2)

Aleksey Sereda
Aleksey Sereda

Reputation: 1

In my case (Safari Version 15.4), the solution to add a small (0.1s) animation delay also worked.

animation: slide 37.5s cubic-bezier(0.83, 0, 0.17, 1) 0.1s infinite;

Upvotes: 0

addMitt
addMitt

Reputation: 1021

Well, I appear to have stumbled upon a workaround at least. Apparently, if mobile Safari hiccups on anything during load, or can't keep up, or something, it won't start the animation. My solution was simply to delay the animation by 0.1s. This gives the browser enough time to get everything loaded and then start the animation, every time.

-webkit-animation: slideshow-right 10s 0.1s linear infinite;

Silly.

Upvotes: 20

Related Questions