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

carlocoxx’s picture

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..

gittosj’s picture

gittosj’s picture

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!

gittosj’s picture

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!

davidee’s picture

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.

gittosj’s picture

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.

markwerks’s picture

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

tim.abbott’s picture

Thanks gittosj, works a treat!

davidee’s picture

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

gittosj’s picture

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?

dnlt’s picture

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

davidee’s picture

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

Carol_ina’s picture

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 :)

davidee’s picture

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

dnlt’s picture

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.

davidee’s picture

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

davidee’s picture

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

brunorios1’s picture

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.

minorOffense’s picture

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!

minorOffense’s picture

Status: Active » Fixed

I added a note in the README about it.

smallcoder’s picture

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.

jboeger’s picture

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

joelhsmith’s picture

Thanks @gittosj

snlnz’s picture

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.

DarkteK’s picture

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

Spiffo’s picture

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.

scottybruce’s picture

Issue summary: View changes

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

gittosj’s picture

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?

  • Commit dc3884f on 7.x-2.x, youtube, 8.x-2.x, startslide by minorOffense:
    Added note about IE10 [#1951458]