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.