1 year ago
FlexSlider CSS3 Transitions Bug
UPDATE: This patch is incorporated into the v2.1 framework update. So if your theme is using Theme Blvd framework 2.1+, there’s no need for you to follow any of the following steps.
This is a quick note for anyone using one of my version 2 themes.
For many people using multiple videos in your sliders, you may have noticed strange effects in the displaying of the videos when viewing your site in Chrome, Safari and on iOS (i.e. iPad, iPhone, etc).
I’ve discovered that this has to do with the FlexSlider plugin’s use of CSS3 transitions used exclusively in these browsers. While progressive on the part of the plugin author, it seems to cause problems in conjunction with the high amount of flexibility our WordPress Slider Manager provides.
So I’ve done a simple, one-line modification to the FlexSlider plugin’s JS File to eliminate CSS3 transitions all together. In my testing, this seems to have completely eliminated the issues with displaying videos in the sliders.
I plan to provide in the next update to the theme, however this is still down the road a bit. If you’d like to update this plugin file yourself, you can download it here:
Download Link: http://tiny.cc/mupqbw
After you download this zip package, inside you’ll find a file called flexslider.js. Simply replace the theme’s current version of this file with this new version using your FTP client or however you manager files on your server.
/wp-content/themes/{your_theme}/framework/frontent/assets/js/flexslider.js
Note: After updating the file, make sure to clear your browser cache when viewing your site again to ensure you’re seeing the updated JS file.
11 comments
Thanks Jason. I applied the patch and Leo is going to test it.
Ciao
Thank for the update!
Thanks Jason. Was having problem with the slider, but the patch did the trick!
I updated this js file. I’m not positive I am having this same issue but anyhow my issue is that the slider just auto rotates even though I pushed paused. Please help. I just started using this website and will look in the help files but figured I check here first. Thanks. If my issue is in the help files just let me know.
Hello Richard,
Here’s how you can get support: http://themeblvd.com/support/#section-2
And this issue wouldn’t specifically have anything to do with the play/pause button not working properly. So make sure when you contact me for support you include a link to your site.
hi there, is this for flexslider v2? does it still do it in flexslider2? i’ve got an issue with *swiping* through slides which have videos when using flexslider v2. is this the same issue? thanks, chris
Nope, this was posted way before Flexslider v2 ever came out. This is an issue that used to present in FlexSlider v1.8 that I had to manually adjust. However, with Flexslider v2, they’ve actually corrected this issue by allowing you to pass in a parameter to turn off CSS3 transitions on the plugin.
This fixed a major issue I was having also, thanks so much!
Thanks Jason this is great!
I was experiencing an issue where text in Chrome (Mac), seemed to glow/light up when the ‘slide’ animation was used (you can see this on the flexslider homepage too if you’ve not seen it) – and I’m using v2.0! I was looking for a fix for this issue when I found this post which seems to of fixed it a treat – so thanks a lot!
Hello,
If you’re using my fix, it means that you’re actually overriding your plugin’s JS file and rolling back before v2, which I wouldn’t think you’d want to do. If my fix here is fixing it for you, most likely it’s a CSS3 transition issue, which you can actually now turn off if you’re using FlexSlider v2 via their parameters.
useCSS: falseHi Jason,
I am using the flexslider, that is built into a theme. The flexslider is V2.0. When viewing the “Fade” transition on an ipad, the images seem to be twitchy when transitioning. Does this fix have any realation to my issue?