All geek questions in one place

-webkit-animation stops when scrolling on mobile safari

I am doing a css3 download animation for a mobile site. The loader works great using the following HTML / CSS:

HTML:

<div class="loader"></div>

CSS

  .loader { background-color: rgba(0,0,0,0); border: 6px solid rgba(0,0,0,0.75); opacity: 0.5; border-top: 6px solid rgba(0,0,0,0); border-left: 6px solid rgba(0,0,0,0); border-radius: 60px; box-shadow: 0 0 5px rgba(0,0,0,0.5); width: 60px; height: 60px; margin: 0 auto; -moz-animation: spin 1s infinite linear; -webkit-animation: spin 1s infinite linear; } @-moz-keyframes spin { 0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); } } @-webkit-keyframes spin { 0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); } }

However, when viewing the animation on a mobile safari, the animation pauses when the page scrolls / touches. Is there a way to save the animation even if the user scrolls the page?

Thanks!

+2
source share
1 answer

I do not think this is currently possible. You must do your own scrolling (or use the framework) to avoid this side effect. I ponder, but I would like to get a more technical idea that this is due to the fact that both native scroll and CSS animation compete for GPU control - they both cannot have it

+2
source

Source: https://habr.com/ru/post/973336/

More articles:


All Articles