Very choppy animations in Safari

[schmolzp]

I am building a page with skrollr and it works great! I have it working the way it should in Chrome, Firefox, and IE. However, in Safari 6.0.5 on a mac version 10.7.5 it is very choppy in animating the elements when scrolling. Basically, when I scroll down it does not animate the keyframes. Instead, it just skips to a certain keyframe depending on where I have scrolled. I cannot figure out why it would be doing this only in Safari. I'm sorry, but I am not able to post a link to the site due to an NDA. Any help or suggestions on this would be greatly appreciated.

[Prinzhorn]

Cross post http://stackoverflow.com/questions/19280395/skrollr-very-choppy-animations-in-safari

I can't help you for two reasons: no code and no Safari

[schmolzp]

Yeah, sorry. Just thought if I could get more visibility, someone might be able to help me. Maybe someone else can shed some light on this issue. I know it's hard with no code to look at.

[schmolzp]

Ok, here is the CSS and the skrollr HTML. Let me know if anything is glaring to you. Thanks

.scroll-btn { z-index:6; bottom: 10%; left: 46.5%; position:fixed; text-align: center; -webkit-animation: scrollBounce 1.5s infinite; /* Safari 4+ / -moz-animation: scrollBounce 1.5s infinite; / Fx 5+ / -o-animation: scrollBounce 1.5s infinite; / Opera 12+ */ animation: scrollBounce 1.5s infinite; } @-webkit-keyframes scrollBounce { 0% { margin-bottom: 0; } 50% { margin-bottom: 30px; } 100% { margin-bottom: 0px; } } @-moz-keyframes scrollBounce { 0% { margin-bottom: 0; } 50% { margin-bottom: 30px; } 100% { margin-bottom: 0px; } } @-o-keyframes scrollBounce { 0% { margin-bottom: 0; } 50% { margin-bottom: 30px; } 100% { margin-bottom: 0px; } } @keyframes scrollBounce { 0% { margin-bottom: 0; } 50% { margin-bottom: 30px; } 100% { margin-bottom: 0px; } } .text { color: #fff; font-weight: 300; position: absolute; text-shadow: 0px 0px 30px #000000; filter: dropshadow(color=#000000, offx=0, offy=0); } .scene { position: fixed; background-attachment: fixed; top: 0; left: 0; min-height: 100%; min-width: 100%; width: 100%; height: auto; background-size: cover; background-position: center center; overflow: hidden; } .scene > img { position: absolute; max-width: none; } .scene1 { background-image: url('img_homepage/ATH_10_0115.jpg'); background-repeat: no-repeat; z-index:5; box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.5); } .scene2 { background-image: url('img_homepage/performing_image1.jpg'); background-repeat: no-repeat; z-index:4; box-shadow: 5px 0 30px 0 rgba(0, 0, 0, 0.5); } .scene2-bow { background-image: url('img_homepage/performing_image2.jpg'); background-repeat: no-repeat; z-index:3; box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.5); } .scene3 { background-image: url('img_homepage/discovering_image1.jpg'); background-repeat: no-repeat; z-index:2; } .scene3-cutout { background-image: url('img_homepage/discovering_image2.png'); background-repeat: no-repeat; z-index:3; } .scene4 { background-image: url('img_homepage/graduation_image.jpg'); background-repeat: no-repeat; z-index:1; } .at-UofSC { font-size: 55px; width: 100%; background-color: #73000a; background-color: rgba(115, 0, 10, 0.9); color: #FFF; font-weight: 300; z-index: 6; position: relative; top: 100%; text-align: center; box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5); } #sitemap, #footer-menu {display:none;}

        <img src="img_homepage/scroll_down.png" class="scroll-btn" alt="Scroll Down" data-0="opacity:1;bottom:10%;" data-250="opacity:0;bottom:-10%;">
        <div class="caption">
            <h1 class="garnet" data-0="right:5%;font-size: 56px;padding:5px 15px 15px;z-index:7;" data-350="bottom:-100%;" data-750="bottom:70%;" data-1700="bottom:70%;position:fixed;" data-1800="bottom:20%;" data-2450="bottom:20%;" data-2600="bottom:45%;" data-2950="bottom:100%;">you can find yourself</h1>
        </div>
        

        <div class="scene scene1" data-1450="height:100%;display:block;" data-1750="height:0%;min-height:0%;display:none;">
            <img src="img_homepage/crowd_pop_1.png" alt="Student Cheering" data-0="transform:scale(0,0);top:150px;left:10%;" data-450="transform:scale(1,1);" data-475="transform:scale(1,1);" data-525="transform:scale(1.1,1.1);opacity:1;" data-550="opacity:0;">
            <img src="img_homepage/crowd_pop_2.png" alt="Student Cheering" style="bottom:20px;left:20%;" data-450="transform:scale(0,0);" data-900="transform:scale(1,1);" data-925="transform:scale(1,1);" data-975="transform:scale(1.1,1.1);opacity:1;" data-1100="opacity:0;">
            <img src="img_homepage/cheering.png" alt="Cheering" data-0="top:30%;" data-800="right:-100%;" data-1400="right:7%">
            <img src="img_homepage/crowd_pop_3.png" alt="Student Cheering" style="bottom:30%;right:10%;" data-900="transform:scale(0,0);" data-1350="transform:scale(1,1);" data-1375="transform:scale(1,1);" data-1425="transform:scale(1.1,1.1);opacity:1;" data-1450="opacity:0;">
        </div>

        <div>
            <div class="scene scene2" data-1450="background-position:0 155px;" data-1750="background-position:0 0;" data-1775="width:100%;" data-2050="width:0%;min-width:0%;">
            </div>
            <div class="scene scene2-bow" data-1775="background-position:155px 0;" data-2050="background-position:0px 0;" data-2150="height:100%;" data-2450="height:0%;min-height:0%;">
                <img src="img_homepage/performing.jpg" alt="performing" data-1800="left:100%;bottom:-15px;" data-2300="left:-100%">
            </div>

            <div class="scene scene3" data-2150="background-position:0 155px;" data-2450="background-position:0 0px;" data-2800="height:100%;" data-3100="height:0%;min-height:0%;overflow:visible;top:0%;" data-3300="top:-50%;">
                <div class="scene scene3-cutout" data-2150="background-position:0 155px;" data-2450="background-position:0 0px;" data-2800="height:100%;" data-3100="height:0%;min-height:0%;"></div>
                <img src="img_homepage/discovering.png" alt="discovering" data-0="z-index:1;" data-2500="left:100%;bottom:150px;" data-2900="left:-100%">
                <div class="at-UofSC" data-0="top:100%;">at the University of South Carolina</div>
            </div>

            <div class="scene scene4">
                <div class="text" style="font-size:150px;text-align:right;line-height:.8em;width:700px;top:35%;" data-3200="opacity:0;" data-3300="opacity:1;" data-3351="right:9%;" data-3450="right:12%;" data-3850="opacity:1;" data-3950="opacity:0;"><span style="font-size:60px;">you'll definitely</span> <span data-3450="opacity:0;" data-3550="opacity:1;">find</span> <span data-3550="opacity:0;" data-3650="opacity:1;">yourself</span></div>
            </div>
        </div>

        <div class="scene scene5" data-0="display:none;" data-3649="display:block;z-index:1;" data-3650="z-index:2;">
            <div class="scene" data-3650="background-color:rgb(0,0,0);opacity:0;" data-3900="background-color:rgb(0,0,0);opacity:.5;"></div>
            <span class="text" style="width:700px;margin-left:-320px;font-weight:400;font-size:60px;left:50%;top:40%;" data-3900="opacity:0;" data-4000="opacity:1;">Start your journey today.</span>
            <div style="position:fixed;z-index:6;width:100%;" data-3900="bottom:-35%;" data-4150="bottom:0%;">
                <?php include("includes/global_footer.php"); ?>
            </div>
        </div>

   </div>

[Prinzhorn]

I only took a quick look at it (it's hard because what you posted is pretty messed up and unindented).

Prime candidates for performance issues: box-shadow (try without) and animations on background-position.

[schmolzp]

Yeah, sorry about the code, it removed some of my formatting when I pasted it into the comment. Ok thanks, I'll check it out. It's just so frustrating because it's so smooth everywhere else but Safari on a MAC.

[LeMiira]

Same issue on Safari 7 on MAC, any idea?

[schmolzp]

@amindiary What I had to do on Safari is use this -webkit-transform: translateZ(0); on the element that was doing heavy animations to force hardware acceleration. This will make safari render like it's in 3D and smooth out the animations. However it might screw up other things on your page so be careful. Use these properties to help fix those issues -webkit-backface-visibility: hidden; -webkit-perspective: 1000;

Also if you do this on an element using background-attachement: fixed; it will definitely screw up the way things look so be aware of that. Hope this helps!

[karl-tech]

THX??

------------------ ԭʼ?ʼ? ------------------ ??????: "Peter";[email protected]; ????ʱ??: 2013??11??1??(??????) ?賿2:23 ?ռ???: "Prinzhorn/skrollr"[email protected];

????: Re: [skrollr] Very choppy animations in Safari (#342)

@amindiary What I had to do on Safari is use this -webkit-transform: translateZ(0); on the element that was doing heavy animations to force hardware acceleration. This will make safari render like it's in 3D and smooth out the animations. However it might screw up other things on your page so be careful. Use these properties to help fix those issues -webkit-backface-visibility: hidden; -webkit-perspective: 1000;

Also if you do this on an element using background-attachement: fixed; it will definitely screw up the way things look so be aware of that. Hope this helps!

?? Reply to this email directly or view it on GitHub.

[LeMiira]

@schmolzp Thank you, I think that will help, will try it.

[nigelheap]

I'm having the same issue with this site. http://creationarium.com/gama/ Any solid suggestions yet?

[fowkswe]

Same issue here as well. An example:

http://billyfowks.com/clients/seeme/v2/

[schmolzp]

@fowkswe Your website seems pretty smooth to me on Safari 6.1. Just as smooth as Chrome 30.

[fowkswe]

The svgs (the colored chevrons and diamonds) are smooth, but the images are choppy for me on mavericks + 7.0.

[stefanneculai]

Same issue for me (http://froala.com - see 2nd picture). And we had several reports from our users about this issue. Works well in Firefox and Chrome, but not in Safari.

Safari 7.0.1 Mavericks 10.9.1

[dreadpiratebrown]

Sixthing this issue here. http://ducktapefestival.qa.aztekhq.com - choppy animations in Safari desktop (Mavericks), huge jumps on iPhone Safari. Using translateZ(0) or translate3d(0,0,0) did not help.

[marquizzo]

I'm having the same issue with Chrome v 35.0, but I think I've found the reason why this happens. It's because Chrome usually doesn't have smooth scrolling like Firefox does. When you scroll in Firefox, it'll have a nice, smooth slide. Chrome, however, will jump 100px, without interpolating the middle frames.

Consider the following element:

<img src="logo-sm.png" style=""
  data-start="margin-top:500px"
  data-800-start="margin-top: 0px"
>

This leads Chrome to:

1. Make the parent (anchor) element jump 100px, and then...
2. Animate the margin-top through Skrollr. But only after it already has performed the ugly jump.

A workaround that I found was to use:

<img src="logo-sm.png" style="position: fixed;"
  data-start="margin-top:500px"
  data-800-start="margin-top: -800px"
>

Notice the style="position: fixed;"

This leads Chrome to:

1. Parent (anchor) element doesn't move because in this case the image is attached to the viewport.
2. Animate margin-top through Skrollr, giving it a smooth transition. You avoid the 100px jump.

You can see the difference in this example: www.dyadstudios.com/skrollr-chrome-fix.html

The first image (image on the left) is not fixed. The image on the right has position: fixed. This is a sloppy workaround because "position: fixed" will likely throw off your layout, but it's the only way I found to get rid of the staggering animation.

(The difference of margin-top between both images stems from the fact that one is moving 100px at a time with the page, and the other one is fixed to the viewport)

[schmolzp]

I looked at the example in Chrome 35 and both images seem to scroll smoothly without any choppiness. I know the right one is supposed to be smooth but the left one is just as smooth.

[tezzataz]

I've had same issues with safari and finally fixed it.

I used both of the following on the parent element: webkit-backface-visibility:hidden; -moz-backface-visibility:hidden;

Then on the element that is being animated: -webkit-transform: translateZ(0); -moz-transform: translateZ(0);

This has fixed pretty much all the lagging and choppy scrolling issues for me, smooth as a baby's bottom. Might be helpful to others.

EDIT: The other thing that really helped was using -webkit-transform: translate instead of margins and top and bottom.

[jrobertblack]

Was there anymore new information on this? I am having very bad choppiness on safari, I have tried all these solutions but nothing helps. I have targeted the problem to opacity settings, if I have opacity background or opacity borders then it really lags in safari, its pretty much smooth without any opacity on the elements. Same settings works very smooth in Chrome. Is there any settings that would help this?