-
AuthorPosts
-
June 5, 2014 at 3:58 am #274914
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!
June 5, 2014 at 10:48 pm #275357Hi 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,
DevinJune 6, 2014 at 6:52 am #275464hi 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
PedroJune 6, 2014 at 3:37 pm #275613My 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?June 6, 2014 at 3:46 pm #275616hey 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
PedroJune 6, 2014 at 3:54 pm #275618thanks for the link aovivo. Appreciate that. Will examine it in more detail when I have some time on my hands. Though like you, I’m weary that trying to implement it could potentially conflict with other plugins/scripts in Enfold.
Cheers
- This reply was modified 10 years, 4 months ago by tma8.
June 7, 2014 at 7:58 am #276016Hi!
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,
IsmaelJune 7, 2014 at 7:51 pm #276095Hi 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?
June 7, 2014 at 10:26 pm #276129Hey!
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,
JosueJune 9, 2014 at 1:22 am #276309Hi Josue,
That new code doesn’t seem to change anything either (parallax and jumpiness still there).
Cheers
June 9, 2014 at 7:31 pm #276559Hi!
Try changing the code in Quick CSS to:
.Safari .avia-fullscreen-slider .avia-slideshow-inner { -webkit-transform: translate3d(0px, 0px, 0px) !important; }
Best regards,
JosueJune 10, 2014 at 4:43 pm #277016Hi 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
PedroJune 10, 2014 at 10:13 pm #277220Hi 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
June 10, 2014 at 10:29 pm #277229Hi!
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,
JosueJune 10, 2014 at 10:35 pm #277231Hi 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?
June 10, 2014 at 10:41 pm #277234Yes, 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!
JosueJune 10, 2014 at 10:52 pm #277240Awesome. 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.
June 10, 2014 at 10:55 pm #277244Try:
.Safari .avia-fullscreen-slider .avia-slideshow-inner, .MSIE .avia-fullscreen-slider .avia-slideshow-inner { -webkit-transform: translate3d(0px, 0px, 0px) !important; }
Cheers!
JosueJune 10, 2014 at 10:59 pm #277248Ok will try that a bit later. Thanks again for your help Josue. Will let you know how that works on IE.
Cheers
June 10, 2014 at 10:59 pm #277249Hope it does the trick :)
June 11, 2014 at 3:11 am #277336This reply has been marked as private.June 11, 2014 at 8:08 am #277420Hey!
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,
PeterJune 11, 2014 at 8:13 am #277421great, thanks!
my best regards
PedroJune 11, 2014 at 8:23 am #277424Hey!
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 -
AuthorPosts
- The topic ‘Fullscreen slider jumpy and not smooth on some browsers’ is closed to new replies.