Codeinwp / Ideal-Image-Slider-JS

Quite simply the ideal Image Slider in vanilla JS.
http://idealimageslider.com
GNU General Public License v3.0
1.57k stars 160 forks source link

Partially broken in Firefox #22

Closed thecodejunkie closed 10 years ago

thecodejunkie commented 10 years ago

I just tried the slider in FireFox 32 and it does not quite work. It shows and swaps the images, but there is no transition and no navigation arrows.

bradfloodx commented 10 years ago

Hi @thecodejunkie I've just tested the standard demo in my Firefox v 32 on OSX and I can't simulate the issue you are having. Are you on Windows? OSX?

voigtan commented 10 years ago

Have the same issue as @thecodejunkie on windows 7, Firefox 32

bradfloodx commented 10 years ago

Hmm @voigtan I'm unable to simulate on my Windows 7, Firefox 32 (freshly installed). What URL are you using to test with? Are you getting any Javascript Console errors?

voigtan commented 10 years ago

visited http://gilbitron.github.io/Ideal-Image-Slider/index.html and no errors in firebug

thecodejunkie commented 10 years ago

Windows 7 (x64), Firefox 32 (Disabled all extensions) both in Normal and Incognito modes - No errors OSX 10.9.4, Firefox 32 (fresh install, no extensions) - Works

gilbitron commented 10 years ago

So it works in Firefox 32 on OSX but not on Windows 7?

florianbrinkmann commented 10 years ago

http://gilbitron.github.io/Ideal-Image-Slider/index.html works for me with Firefox 32 on Windows 7.

gilbitron commented 10 years ago

Ok so can anyone confirm that this is an issue?

thecodejunkie commented 10 years ago

I am pretty sure we have confirmed it's an issue? Me and @voigtan are on two completely different machines and we've both experienced the same thing on Windows 7 (x64) + Firefox 32

I will also try on my machine at home (same setup) when I get back home later today

thecodejunkie commented 10 years ago

output

gilbitron commented 10 years ago

Windows 7 (x64), Firefox 32 (Disabled all extensions) both in Normal and Incognito modes - No errors OSX 10.9.4, Firefox 32 (fresh install, no extensions) - Works

@thecodejunkie Sorry I was getting confused. I thought that in this comment you were saying it works on both.

@FlorianBrinkmann @voigtan Out of interest are you guys Windows x64 or x32? Use http://supportdetails.com to check.

thecodejunkie commented 10 years ago

output

Here is OSX.. To be honest it feels a bit sketchy here as well. It works, but when I hover the right side of the image I don't get the arrow

@gilbitron sorry I meant no errors in the console

florianbrinkmann commented 10 years ago

@gilbitron I'm using Windows x64

voigtan commented 10 years ago

Windows 7 x64 and @thecodejunkie gif shows the same problem as I have

gilbitron commented 10 years ago

Ok thanks guys I'll have a look.

florianbrinkmann commented 10 years ago

slider

thecodejunkie commented 10 years ago

@FlorianBrinkmann that could be any browser, any version ;)

florianbrinkmann commented 10 years ago

@thecodejunkie better now? ;)

slider-zwei

dedurus commented 10 years ago

I can confirm the same: Win7 x64, FF31 and FF32. Commenting the lines https://github.com/gilbitron/Ideal-Image-Slider/blob/master/ideal-image-slider.js#L410 and https://github.com/gilbitron/Ideal-Image-Slider/blob/master/ideal-image-slider.js#L411 solves the problem with navigation arrows but not the transition effect problem. Also, this might make problems on touch devices

// Touch Navigation
            if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch){
                this.settings.effect = 'touch';
                // Commented out lines for FF31+ display of nav arrows
                //previousNav.style.display = 'none';
                //nextNav.style.display = 'none';

                sliderEl.addEventListener('touchstart', _touch.start.bind(this), false);
                sliderEl.addEventListener('touchmove', _touch.move.bind(this), false);
                sliderEl.addEventListener('touchend', _touch.end.bind(this), false);
            }
thecodejunkie commented 10 years ago

Sorry I noticed that I said Win 7 (x64) but I was actually on a Win 8.1 virtual machine.

Just tried it at home on my Win 7 (x64) with both Firefox 31 and 32 and it works

There are some real inconsistencies going on here =/

dedurus commented 10 years ago

Regarding transitions in FF32 (win7 x64): I changed the line https://github.com/gilbitron/Ideal-Image-Slider/blob/master/ideal-image-slider.js#L369 like this:

// old line
slideEl.style.cssText += '-webkit-transition-duration:'+ this.settings.transitionDuration +'ms;-moz-transition-duration:'+ this.settings.transitionDuration +'ms;-o-transition-duration:'+ this.settings.transitionDuration +'ms;transition-duration:'+ this.settings.transitionDuration +'ms;';

// changed line (changed 'moz-transition-duration' to 'moz-transition'
slideEl.style.cssText += '-webkit-transition-duration:'+ this.settings.transitionDuration +'ms;-moz-transition:'+ this.settings.transitionDuration +'ms;-o-transition-duration:'+ this.settings.transitionDuration +'ms;transition-duration:'+ this.settings.transitionDuration +'ms;';

and transitions are working

gilbitron commented 10 years ago

I've just tested this on:

gilbitron commented 10 years ago

I'm going to close this for the moment and put it down to browser inconsistencies. If it comes up again I'll have another look at it.