-
Posts
-
Hi,
I’ve noticed that my fullscreen slider gets rather jumpy and choppy on certain browsers as you scroll down (even when you click the next section button at times). In particular Safari 7.0.3 on Mac and IE 11 on windows it can get pretty bad. My friend checked on Firefox 28 on Windows XP and he says its pretty jerky as well when you scroll down. Firefox (29) and Chrome on Mac and Windows seems fine.
Seems others have brought this issue up on the forums. Have there been any updates as to any possible fixes?
Thanks!
Hi tma8!
As far as I know its related to the parallax effect and how its implemented but the last Kriesi mentioned on the topic was that he was waiting for things to change on Safari to better support the effects rather than use any big heavy javascript to do things.
Best regards,
Devinhi there – same here – although I am using Firefox and Chrome to test. Its really jumpy while I thinks pretty hard on browsers…
i have seen some jQuery Easing Plugins that might smoothen it out – but i wonder if it would be possible, i a far future, to controll speed, easing etc via shortcode or panel…my best regards
PedroMy hope is that Kriesi could implement a fix before waiting on Safari to better support the effects, since it’s not just Safari. IE 11 on Windows and FF 28 as well it gets choppy when scrolling/using next section button to move down screen.
@aovivo, have you tried any specific jQuery Easing Plugins to help this matter that you’d recommend trying out?hey tma8,
not, i havent tried out yet – and i am not sure if i have the guts to do so in a near future, since jQuery – used by scrubs like myself, can mess up some things.
but i picked up that information on a similar discussion i followed looking into this particular issue and someone pointed out to have a closer look to this specific one http://gsgd.co.uk/sandbox/jquery/easing/
its no WP plug-in, if thats what you were hoping for…my best regards
PedroHi!
Thank you for the info.
Looks like we need to wait until Safari got better support for the webkit-transform property or you can disable the effect for Safari with this on Quick CSS or custom.css:
.safari .avia-fullscreen-slider .avia-slideshow-inner { -webkit-transform: translate3d(0px, 0px, 0px) !important; }Before adding the code above, edit header.php then find this code on line 61:
<body id="top" <?php body_class($style." ".$avia_config['font_stack']." ".$blank); avia_markup_helper(array('context' => 'body')); ?>>Replace it with:
<body id="top" <?php $browser = avia_get_browser(); body_class($style." ".$avia_config['font_stack']." ".$blank.$browser); avia_markup_helper(array('context' => 'body'));?>>Regards,
IsmaelHi Ismael,
Thanks for the help.
I’ve replaced code in line 61 of header.php, added new css and even flushed my cache on Safari (iMac and Macbook) but nothing’s changed — the parallax effect and jumpiness is still there. Any ideas why?
Hey!
Try with this code instead (same line 61):
<body id="top" <?php body_class($style." ".$avia_config['font_stack']." ".$blank." ".avia_get_browser()); avia_markup_helper(array('context' => 'body')); ?>>Regards,
JosueHi Josue,
That new code doesn’t seem to change anything either (parallax and jumpiness still there).
Cheers
Hi!
Try changing the code in Quick CSS to:
.Safari .avia-fullscreen-slider .avia-slideshow-inner { -webkit-transform: translate3d(0px, 0px, 0px) !important; }Best regards,
JosueHi there,
I can confirm that on Firefox the scrolling is pretty jumpy, too.. the effect is even stronger if i am using textlayers on backgrounds.
on the other side – Chrome is as smooth as it can be.
I cant say anything about IE – since it breaks my whole parallax/design box structure – for whatever the reason…regards
PedroHi Josue,
I had already tested it out using this CSS (Ismael had provided this code earlier in the thread):
.Safari .avia-fullscreen-slider .avia-slideshow-inner {
-webkit-transform: translate3d(0px, 0px, 0px) !important;
}Any other suggestions?
Cheers
Hi!
I’m not seeing the code being applied here (Quick CSS):
http://23.235.197.229/~beyondi/wp-content/uploads/dynamic_avia/beyondintelligence_child.css?ver=1Regards,
JosueHi Josue,
I don’t actually have that in quick CSS section, but I placed that in my child theme. That shouldn’t matter should it?
Yes, it’s ok there but you need to change the s to a capital S:
.Safari .avia-fullscreen-slider .avia-slideshow-inner { -webkit-transform: translate3d(0px, 0px, 0px) !important; }Cheers!
JosueAwesome. Thanks Josue. I missed that your css had “S” instead of “s”. Changed it and now it’s disabled it in Safari.
How would I disable it too for Internet Explorer? I found it really jumpy on IE11 as well.
Thank you.
Try:
.Safari .avia-fullscreen-slider .avia-slideshow-inner, .MSIE .avia-fullscreen-slider .avia-slideshow-inner { -webkit-transform: translate3d(0px, 0px, 0px) !important; }Cheers!
JosueOk will try that a bit later. Thanks again for your help Josue. Will let you know how that works on IE.
Cheers
Hey!
I tagged this thread for Kriesi. I’m not sure if there’re any updates planned to change the parallax effect or if he wants to wait for better browser support.
Regards,
PeterHey!
I checked the code that I suggested and I realized it’s wrong. Please use this on header.php instead:
<body id="top" <?php $browser = strtolower(avia_get_browser()); body_class($style." ".$avia_config['font_stack']." ".$blank.$browser); avia_markup_helper(array('context' => 'body'));?>>Add the css snippet:
.safari .avia-fullscreen-slider .avia-slideshow-inner { -webkit-transform: translate3d(0px, 0px, 0px) !important; }Cheers!
Ismael
- The topic ‘Fullscreen slider jumpy and not smooth on some browsers’ is closed to new replies.