Is Flex slider 2 + the Views Slideshow plugin compatibile with Internet Explorer 10 (IE10)?

I'm not certain if this is Flex Slider or Flex Slider Views Slideshow issue but I've very recently upgraded both projects to Flex Slider 2 and all was/is working great until I upgraded my local dev machine (XAMPP/Windows 7 Ultimate 64bit) to IE10 and the whole show now stalls entirely. On the dev server the, currently installed Flex Slider 7.x-1.0-rc3 is also completely unresponsive when viewed on IE10 but continues to work fine on Chrome, Safari, etc.

By "unresponsive" I mean:

1. The images load and scale fine (the Views format is set to Slideshow/Flexslider) but
2. The slideshow doesn't autoplay; and
3. The displayed pager buttons don't respond to being clicked (although the css rollovers are working fine on them).
4. The enabled mouse and keyboard events are also unresponsive - but work fine on Chrome/Safari, etc.
5. Although, the next/forward group pager icons DO work.

Any thoughts?

If anyone could confirm they have this working fine in IE10 I can investigate further.

Thanks.

Q.

Comments

The flexslider works using IE 10 on my website after installing the jQuery update module and setting the version to use on 1.7. It doesn't work with the 1.8 version. Autoplay works but I didn't test the mouse and keyboard events. Hope this helps..

Ok - I've made a temporary fix. The issue is in the base flexslider js code in sites/all/libraries/flexslider. Fix / workaround is as follows:

1) Make the changes described in the link below to jquery.flexslider.js (if it helps I've included a snippet of my file with the additions commented):

https://github.com/woothemes/FlexSlider/issues/413

621       if (slider.transitions) {
622         target = (vertical) ? "translate3d(0," + target + ",0)" : "translate3d(" + target + ",0,0)";
623         dur = (dur !== undefined) ? (dur/1000) + "s" : "0s";
624         slider.container.css("-" + slider.pfx + "-transition-duration", dur);
625         slider.container.css("transition-duration", dur); // new line for IE10
626       }
627
628       slider.args[slider.prop] = target;
629       if (slider.transitions || dur === undefined) slider.container.css(slider.args);
630         slider.container.css('transform',target); // new line for IE10
631     }

save the file and then move jquery.flexslider-min.js to jquery.flexslider-min.js.bak (in case you need it later) and then, whilst in the flexslider js directory, create a soft link to the file you've just edited as follows:

ln -s jquery.flexslider.js jquery.flexslider-min.js

So to explain we have hacked jquery.flexslider.js to work with IE10 and then fooled the drupal module into loading the hacked file rather than the minified version. Ugly but it seems to work.

Last step - clear your caches on browser and server (don't forget js aggregation etc) and then try it - it works!

As a follow-up and I haven't been able to analyse why this is - the current unpatched flexslider seems to working fine with IE10 on some of our sites and not on others so check before you make this change - it may not be necessary!

IE 10 stil doesn't work for me. That means that the slideshow doesn't slide.
gittosj, I like to know what you exactly do. I dont fully get it.

OK davidee. I probably explained poorly. The bug is in the flexslider javascript code, not the drupal module. The solution / temporary hack is to edit the javascript which is in you sites/all/libraries directory. In my case its in sites/all/libraries/flexslider.

I can't upload the full code to drupal.org but here is the link to my patched version (which I'll leave up for a few months) which I hope will save you some time:

http://www.gittos.com/jquery.flexslider.js

Steps:

1) Backup your sites/all/libraries/flexslider/ directory in case I've made a mistake or you do
2) Move/rename sites/all/libraries/flexslider/jquery.flexslider.js to (for example) jquery.flexslider.js.bak and then so the same for jquery.flexslider-min.js so it (for example) becomes jquery.flexslider-min.js.bak
3) Copy/download http://www.gittos.com/jquery.flexslider.js to sites/all/libraries/flexslider/
4) Fix the permissions on the new file (I use chmod -R 750 sites/all/libraries and chown -R [yourusername]:apache sites/all/libraries
5) Create a soft link to the new jquery.flexslider.js and call it jquery.flexslider-min.js to fool the browser so: ln -s jquery.flexslider.js jquery.flexslider-min.js (make sure you're in the flexslider directory when you do this)
6) Clear every browser and server cache you can and it should work!

In case of disaster copy your backed-up flexslider directory over the top of the borked files in sites/all/libraries/flexslider and try again or give up and get a beer!

Hope that helps and good luck.

Thanks so much gittosj!
Dropped this in and it works perfectly!

Thanks gittosj, works a treat!

Hello gittosj,
I tried your method several times and eventually gave up and got a beer, but still I like to know how to get this working. Can you upload your folder somewhere with everything set correctly? That would very kind.
When I follow al the steps my slideshow is gone and the images that should be in the slideshow are listed underneath each other.
Thanks in advance.
Davidee

Hi Davidee - Sounds like an issue with cacheing. Are you running boost? You may need to clear caches on both server and browser several times since the old javascript may be cached. I usually turn off caching, flush all caches, flush the browser cache, turn caching back on, refresh and all is fine.

I don't have access to the server at the moment but will see whether I can tar up the directory and preserve the symbolic links. Are you still having the same problem?

About the issue with freezed slides, we upgraded to jquery 1.7 and then it got working.
I don't know if it solves the other issues.

I hope it help you!

Kind regards,

dnlt

Hello gittosj,
Yes, I still have the same problem I described. I cleared all the caches but that didn't help.
I thought I might have done something wrong creating the soft link. What I did: creating a new file with the name: jquery.flexslider-min.js and put the text: ln -s jquery.flexslider.js jquery.flexslider-min.js in it. Is that wright of did I do something wrong here?
And i don't know how to set the chown to -R [yourusername]:apache sites/all/libraries. I use FileZilla for FTP, how do I change the chown there?
Thanks in advance. Davidee

Thank you very much carlocoxx!! I install the jQuery update module and Flexslider started to work properly. It even solved another problem I had with the Galleria module on IE :)

Hello Carol Lina, can you tell me witch jQuery update of give a link? Thanks

Hello davidee,
jQuery Update is a drupal module that helps to keep updated jquery libraries and its load.
The project URL is https://drupal.org/project/jquery_update‎ .
I'd wish to add that Flexslider didn't work with highcharts (didn't change diapos with charts inside) until we updated jquery_update to its last version.

Hello dnlt,
Thank you very much for the information! I will install the jQuery Update module wright away!

Oh yeah! Installing jQuery Update module and updating jquery version worked:) Thanks for the help everybody!

The flexslider works using IE 10 on my website after installing the jQuery update module and setting the version to use on 1.7.

worked for me too.

Version:7.x-2.0-alpha1» 7.x-2.x-dev
Component:Code» Documentation

If anyone is interested in writing some docs in the REAMDE file about this and submitting a patch that would be great!

Status:Active» Fixed

I added a note in the README about it.

Yep patch and Jquery update set to 1.7 solved this - nice one gittosj !

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

jquery update >> 1.7 worked for me too. thanks!

Thanks @gittosj

I can confirm both methods work.
1. Making the edits in the JS
2. Updating jquery_update to 1.7

Thanks everyone who helped fix this had me chasing my tale for days.

Thx so much gittosj your code worked for me !!! IE10 is working now

I would just like to add another thank you to gittosj. That modified code file helped me with the responsive green theme not animating slides in IE 10.

Issue summary:View changes

#1 Worked for me using the slider that comes with the responsive green theme.

Just a quick note to anyone now still struggling with this. If you update the flexslider js you use in sites/all/libraries to the latest version then I believe the issue disappears. It certainly is for me so we could set this issue to closed now?