Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

FlexSlider navigation issue in Chrome 22 [Win 7] #351

Closed
webmandesign opened this Issue · 99 comments
@webmandesign

Hi guys, does anybody noticed Flex slider not working properly in new Google Chrome 22?

Just reporting: navigation elements are not working. Completely. They are being displayed but nothing happens when clicked. CSS hovers styles works fine on those.

I have noticed some other (not Flex slider related) CSS errors with Chrome 22 so it might be some bug inside the browser, not your code as the slider works fine in other browsers. As I said, just reporting.

@raybellis

I've just had the same problem, it was caused by having touch events enabled in the chrome://flags page.

There are several places in the code where flexslider tries to account for an iOS bug, but in so doing completely disables click events on touch-capable browsers that aren't iOS.

Disabling touch events fixed the problem for me, but the real fix would be for flexslider to correctly detect iOS, rather than touch support. "touch" and "click" events are not mutually exclusive!

@webmandesign

Indeed, it has something to do with touch events. However, I had them disabled in chrome://flags. Not even enableing helped.

So I found this little procedure: http://martinkool.com/post/24459554064/emulate-touch-events-in-chrome but it will enable touch events only when Inspector opened.

This is really not good at all. Far too many websites use Flexslider (I've checked some) and navigation is not working everywhere. I don't know whether it is just me, but seems Google Chrome 22 is real pain in the butt now. I moved from Opera to Chrome for developing websites, but now I've noticed some "weird" CSS interpretation/stylings and even the code Inspector is not working as it used to - but these are browser issues, not Flexslider ones.

Maybe nobody has noticed the navigation not working yet? Or does it work for others? Can somebody check please (on Windows) to narrow down the trouble source (hope it's not something with my installation or something).

@ferlorenzo

It doesn't work for me either, I've been designing my portfolio and these last days, saw this icon on the navigation bar of Chrome and updated the browser and since then, the buttons for prev and next are not working (Windows 7 Home Premium). Flexslider2 keeps working on Firefox and even IE (9). Has anybody got it fixed???

@phantomdentist

Same issue, any fix for this yet?

@suau

I have a touchscreen AIO from MSI here. same issue and definately has to do with touchscreen:
-i can't trigge the navigation with mouseclicks
-but i can trigger it by touching the screen.

@thetrickster

I've noticed dozens of flexslider implementations over the past few days on websites. Most noticeably, the folks at Buffalo Wild Wings (http://buffalowildwings.com) are probably pissed. I'm on Chrome 23.xx on Win 7 and I can't navigate any flexsliders I come across.

@mbmufffin
Collaborator

Several of you are noting this issue, but I cannot replicate it in Chrome 23 or Windows 7. When I turn on touch event emulation, not only can I swipe the slider (which would be the purpose of turning that option on), but I can use the controls as well. I assume that touch event emulation counts mouseclicks as touchstart/touchend events, so that shouldn't be an issue.

Can someone provide a link of a site in which the controls are currently not working? And which browser/OS the problem is seen in.

And as for @raybellis comment regarding testing for iOS; I have no way of proving the touch event bugs are solely found on iOS devices and felt it was much safer to assume any touch device could mishandle touchstart/touchend/click events, stacking them on top of each other and causing frustrating page jumping issues.

@thetrickster
@mbmufffin
Collaborator

I'm having no issues with http://buffalowildwings.com on Chrome on Mac OSX or Chrome on Win 7. Do you use it a particular way and then it breaks? Or it never works.

@ferlorenzo
@thetrickster
@coryschadt

My boss is having this same issue on all flexslider instances. Windows 7 / Chrome 23.

Funny cause I can't replicate it on the same setup.

@thetrickster
@raybellis

@mbmufffin there are two sets of "touch" controls on Desktop Chrome. One is in the Web Inspector options ("Emulate touch events") and the other in in chrome://flags ("Enable touch events"). It was the latter setting I had enabled, and that prevented FlexSlider from working.

Can you elaborate on which particular iOS bug it was you were trying to fix?

@matiyin

I have the same issue in Chrome 23 Win8. Cannot use the navigation button, only when I turn on Emulate Touch Events in the chrome inspector. If there's no solution to this soon I need to switch using another code sadly.

I can see that Chrome fails to assign IDs to each nav control tag, Firefox adds id="fb_1" etc to them.

@theaceofthespade

Well, for one thing, the "touch" member of the option object is ignored. To fix this, replace line 19 with

        touch = (("ontouchstart" in window) || window.DocumentTouch && document instanceof DocumentTouch) && options.touch!==false,

This will allow you to pass in touch:false and disable touch if you are overly paranoid that users aren't going to have touch enabled on their chrome.

@theaceofthespade

I have to ask though, is there any reason to designate that the navigation buttons are activated by "touchend" instead of "click"? As far as I am aware, (I may be wrong), for simple taps, click will always work anyway.

@tommielag

@theaceofthespade THANKS MAN! By switching place of the touchend and the click I did get it to work. The line 20 of code will now be:
eventType = (touch) ? "click" : "touchend",

@wonderment

None of these have worked on my end. Buffalo Wild Wing's website is also still broken. Using Chrome Version 23.0.1271.97 m with Windows 7 Home Premium with Flexslider 2.1

@zanderwaldman

I made these modifications to my copy of flexslider to make the change only for the desktop version of chrome.

right below the variable declarations at about line 30

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if (is_chrome) {
if(navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) == null)
{
// we are on desktop and we need to fix up the bug
eventType = (touch) ? "click" : "touchend";
}
}

@davidicus

@zanderwaldman thanks! your modification worked great. Appreciate it!

@thetrickster

So, what's the verdict on all this? Has someone from the Woo team been notified? Are we supposed to hack our FlexSlider javascripts with the above code in order to fix this? I have about 10 sites I used the slider on-- I only received calls from 3 of the clients so far who are frustrated with the slider not working. Should i make these edits to my js? I'm worried about it though since most of my clients update their plugins and themes even when they shouldn't and that will wipe out my changes. Can this be fixed by the Woo team? Will they have to update all their themes which rely on it? Ooof.

@thetrickster

And FYI-- I just tested www.buffalowildwings.com in Firefox 18.0 (Beta update channel) and clicking the arrows or pager circles doesn't trigger the slider to slide. This problem might not just be in Chrome/Win.

@mbmufffin
Collaborator

@thetrickster The verdict is that this still does not make any sense. You're all essentially talking as if FlexSlider is completely broken when it is not. You have to figure out exactly what user settings you guys have set to create this problem in order for it to be fixed. I can tell you that reversing logical code into illogical code, as per @zanderwaldman's example, is not the answer. Every OS/Browser listed here I have personally tested and verified as working - ergo - it must be user specified settings.

@thetrickster
@wonderment

@mbmufffin I don't think anyone is saying FlexSlider is COMPLETELY broken. This is not a user settings issue. Originally, I saw your reply and was about to respond with the fact the Buffalo Wild Wings website still doesn't work only to find out it now does.Then, I realized, the issue at hand I came across on my laptop -- not my desktop. Both are running Windows 7 and using the same Chrome version (23.0.1271.97 m) so there's definitely something awry and it's not specific to setting up FlexSlider properly.

The only reason I noticed this is because my local dev environment stopped working where none of the FlexSlider code had been touched (it was working on my staging server).

@thetrickster
@mbmufffin
Collaborator

Working, Chrome 23 / Win 7 VMWare Fusion. What do I test next?

Screen Shot 2013-01-08 at 2 28 01 PM

@thetrickster
@mbmufffin
Collaborator

You can tell I'm looking at Chrome, on Windows 7, through VMWare Fusion. What I was implying by "Working..." was that I used the navigation pieces successfully; arrows and paging.

@thetrickster
@thetrickster
@wonderment

@mbmufffin

http://www.screenr.com/2AK7

A screencast of me going through the issue to help illuminate things a bit.

@zanderwaldman

I did notice it was working for me in Chrome on VMWare Fusion Win 7 but on any of the other PC's in the office here running native Win 7 and Chrome the issue is occuring. I realize my hack was reversing the logic but it is something I was trying to not get client complaints until the plugin is fixed.

@thetrickster

@wonderment I'm having the same issue on Firefox 18 for Win 7? What do you see in Firefox 18?

@wonderment

@thetrickster Interesting. I had 17.01 installed on both desktop and laptop (Win 7). The desktop version works and so does the laptop; HOWEVER, I updated to Firefox 18 and now, only the desktop version works.

@mbmufffin
Collaborator

@wonderment When you inspected the page, Modernizr showed touch has one of the html classes. FlexSlider uses the same test, so they are both finding touch to be enabled. I'd check for a chrome flag you potentially set to enable touch event simulation, because it should not be registering your browser as touch enabled.

@thetrickster

I can also concur that whenever I have the error on a site that uses Modernizr-- the "touch" class is added to the html tag.

@mbmufffin
Collaborator

The plugin is actually behaving exactly as expected if your browser thinks it has touch enabled, but does not actually. It won't do anything on clicks, and will wait for touchend events. Essentially, nothing happens on click (good), but no touchend events ever register (bad).

So, the answer lies within figuring out why the touch test is throwing a false positive.

@wonderment

If I hit 'Emulate Touch Events' in Incognito mode on the laptop in Chrome, it works when I click on the arrows. Hmm...

@mbmufffin
Collaborator

@wonderment Correct behavior again, as your browser is now responding to touch events. Maybe Modernizr has a new test for touch events I don't know about.

@thetrickster
@wonderment

@mbmufffin If it's set to Emulate Touch Events, shouldn't it do just that, though? I've never used it before but I'd assume, at least on a mobile device, I should be able to click and swipe -- where as, right now, it starts to swipe but fires the click event in the process which takes me to that particular page (all in reference to BWW).

@wonderment

@thetrickster Same for me.

@thetrickster
@smolak

Same thing on Firefox 18 on Windows 7. It works OK on Vista though.
Chrome 24 just came up, and Windows 7 + Chrome 24 = still not working.

@wonderment

Anyone have any success with this? There's definitely something awry which can't strictly be tied down to Modernizr as I've tested with various devices on the same site. Any ideas?

@theaceofthespade

I would directly go in and replace all of the nav initiation code to register on "click." Touch devices will trigger this, and there is really no reason to track "touchend" unless you are tracking some sort of motion.

@zanderwaldman

I went back to the original code and changed line 20 to this:

eventType = (touch) ? "click touchend" : "click",

This seems to be fixing the issue and working in all locations I have tested so far, tablet, desktop(mac, pc) FF18 and Chrome.

@thetrickster
@davidicus

I'm not sure what the issue is. I applied the fix given by @zanderwaldman and it fixed the issue on my chrome but where i work we have a QA department. This fix actually caused it to break on their machines. We updated to the same version of Chrome, cleared the cache and still mine would work while QA's didnt. So i had QA go to the plugin site and try their demo. Sure enough it worked on their machine leading me to believe that is one of the many plugins i have which is causing this issue. I took off the fix that i applied from zanderwaldman and sent it to QA. Everything worked fine. This is not good for fixing the issue for clients it doesnt work for but may help someone smarter then me figure what is causing it. And may be the reason why some people see it and some dont on seemingly the same setup.

@zanderwaldman

The one thing I did notice here in our office is that the devices experiencing the issue were PC's that have touchscreens. So the browsers are reporting touch capable but the users are navigating the site by mouse.

@raybellis
@mbmufffin
Collaborator

For those of you experiencing this issue, here is what would be very helpful:

Open your consoles and screenshot the results of the following expressions:

"ontouchstart" in window

window.DocumentTouch

document instanceof DocumentTouch

"ontouchend" in window

If we can identify which of these is throwing the false positive, we can improve the touch test. My assumption is that the safest test for the touchend event will be "ontouchend" in window, but I need to verify it returns false for those of you with browsers throwing false positives.

@zanderwaldman

I think the fix needs to accommodate a device that has both touch and click to solve the problem.

@raybellis

@mbmuffin you're completely missing the point. If the touch test passes, by all means register touch handlers, but you must also register a "click" handler.

@mbmufffin
Collaborator

@raybellis continuing on with comments like that are not going to help solve this problem any faster. If you are experiencing this issue, run those tests and screenshot the results. It'll move us closer to an answer.

@raybellis

@mbmufffin Your tests are absolutely irrelevant for the purposes of this bug. They would be appropriate for people with touch devices that are not being detected. They do nothing to solve the problem that a device that (legally) supports both "touch" and "mouse" is forced into touch mode by your code.

If per my message of a few months ago you could kindly explain exactly what allegedly broken iOS behaviour you were trying to fix then perhaps we can find a better work around that allows both event types to coexist peacefully.

@mbmufffin
Collaborator

@raybellis Assuming an iOS device: touchend and click are two different events. When you have an <a> element, it has both of these events. touchend fires instantly, click fires with 2-3 second delay; ergo use touchend for smoother performance. When deciding to use touchend, click still exists on the <a> element. When you click it, it fires, to which the default action of clicking an <a href="#"> is to jump you to the top of the page; ergo e.preventDefault() on events I know are bound with touchend.

The problem is the assumption that the touchend event will indeed fire. For me to correct that assumption, I need to know how to test it's presence adequately.

@theaceofthespade

Ideally, the real fix would be to fire for both events, and keep track of it so that action is only performed once.

@mbmufffin
Collaborator

@theaceofthespade That would only be ideal if you could not reliably predict if the touchend event would fire.

@theaceofthespade

true, but that does seem to be the case right now.

@smolak

Tests: http://imageshack.us/photo/my-images/829/flexslidertests.png/
I am on Dell Vostro 360: http://www.dell.com/in/business/p/vostro-360/pd
It has a touch screen, which I have turned-off from the start (would you belive that a fly walking on the screen was moving my cursor? :) and problem occurs. Windows 7 x64, FF 18, Chrome 24.

@mbmufffin
Collaborator

@smolak Perfect; that's what I was hoping to see. It lends the fact that the current tests are false positives for the touchend event, and the "ontouchend" is indeed not present, which would offer a better test. Thank you very much for the screenshot!

Can I get anyone else to second these results?

@smolak

@mbmufffin no problem. Glad I could have been of help.

@thetrickster

Here's my result. I'm on Chrome 24 (Win 7/64). https://dl.dropbox.com/u/2603799/screens/flexslider-console-chrome-v24.png

I just realized that while my desktop doesn't have a touch monitor currently, in the past I have installed a MIMO touchscreen monitor. It's a smaller, usb touchscreen monitor I use for my todo list primarily-- maybe there's some plugin that was installed with the mimo monitor package that makes my machine report as a touch device (even though it is currently not plugged in or in use)

@mbmufffin
Collaborator

@thetrickster Thanks! Unfortunately, your browser is sending back very confusing results. It claims the "ontouchend" event is in the window, but doesn't actually register the event?

More tests would be helpful for all others seeing this issue.

@thetrickster

I know, right! Do you think it has to do with the MIMO Monitors drivers I have installed for my touchscreen mini monitor I sometimes attach by USB? It hasn't been attached for a month or so now, but I also hooked it up to my laptop as well which also experiences the same behavior. Which would explain why your VM live tests look fine. Maybe all the complaintants have hooked up some sort of touchscreen device or other input device that causes the browser to think it's partially touch enabled?

@mbmufffin
Collaborator

@thetrickster If it were a driver you installed, I imagine you would see this behavior in other browsers as well. So, if you're just seeing this in Chrome, I'd lean more towards a Chrome setting/flag.

This might sound silly, but do you have "Emulate touch events" enabled under the Chrome Inspector overrides?

@thetrickster

No, that setting is not checked and I've never used it. That was a suggestion early on and I've already checked for that. Nor am I launching Chrome with any other flags. I AM, however, having the same experience on Firefox 19, Win 7/64.

For comparison, here are those same js touch expressions:

flexslider-chrome-firefoz-console-test

@mbmufffin
Collaborator

@thetrickster Interesting, it very well could be that driver. Something is making your browsers think they can perform touch gestures...

@larsbo

Windows 7 x64 PC with touch monitor (pqlabs.com).
FF 18 and Chrome 24: touch works, mouse click doesn't.
IE 10: mouse click works, touch "click" works, swipe doesn't work.

Screens:
FF: http://imageshack.us/photo/my-images/811/eventsff.png/
Chome: http://imageshack.us/photo/my-images/21/eventschrome.png/
IE: http://imageshack.us/photo/my-images/132/eventsie.png/

@thetrickster

Anyone else who is experiencing this problem-- have you installed drivers for a touch screen on the computer being affected? I know for myself-- I installed a MIMO USB touch monitor to use for my todo-list. I also installed the software on my laptop for Win 7 and I have the issue on both machines even when the screen is not in use. If you have this problem let us know if you've ever installed some kind of touch interface driver. I've also installed a WACOM pen tablet driver on both machines as well.

@philsward

Yeah... this has been driving me nutts for months... I haven't exactly dug into the issue to figure out "why" it quit working (around September or October 2012 I think...) but guess what ladies and gentleman: I have a Laptop with a touchscreen!!! And here all this time I thought the cause was due to a FF and Chrome update... (IE9, Safari & Opera all seem to work fine).

I reached up on the http://flexslider.woothemes.com/ demo page and watched it swipe and click away to the touch. Just the mouse doesn't work. (Running v1.8) Anywho, glad I came to the bottom of the comments to see it was causing issues on touchscreen laptops :-)

Adding some love for the 1.x branch to correct this would be nice but if not, I can at least sleep easy tonight.

@thetrickster
@raybellis

@thetrickster the core problem is not mis-detection of touch support. It's the fact that when it does detect touch support it disables mouse support.

@mbmufffin
Collaborator

@raybellis You're correct. I submitted a version update (v2.2.0) that addresses this by watching both events and doing some flagging/timing to ensure both can be used but only one fires. I released the pull request and it's making its way through the develop branch. Should be on master soon...

@lifewithryan

Any idea of how long "soon" exactly is? I'm experiencing an issue on my mobile devices where the nav arrows won't advance the slide, but swipe works....the project launches as the end of February...got my fingers crossed :)

@mattyza
Owner

@lifewithryan - We're looking to launch version 2.2.0 around the end of February.

The version on the "develop" branch is stable around 90% of the time, so you can also grab that version if version 2.2.0 hasn't launched by your project's due date. :)

Regards,
Matty.

@larsbo

i use the develop version 2.2.0 in production for about a week now and can confirm that the click problems in combination with a touch device are gone!

thank you @mbmufffin :+1:

@mattyza
Owner

Thanks for confirming this on your end, @larsbo.

@Nettsentrisk

Seems to be working again in Chrome 24.0.1312.57 m.

@lifewithryan
@mattyza
Owner

Hi all,

We're working towards the next stable release of FlexSlider and have made a few iterations to the "develop" branch over the past few days.

Could you please test and confirm that all control actions (direction arrows and pagination) are working in your specified version of Chrome, as well as swipe events?

We are currently working on swipe events in IE10 on touch devices as well over at #519.

We'd really like to close this issue off within the next 3 days so please test, everyone! :)

Thanks and regards,
Matty.

@thetrickster

Hey Matty-- thanks for the patch. I've tested this on both my laptop and desktop where I was having the issues and they seem resolved for me. After some digging I think the problem for me was that I have installed two plugins that might be introducing touch events to my non-touchscreen device.

When I visit chrome://plugins I have:

WacomTabletPlugin - Version: 2.0.0.1
Wacom Dynamic Link Library - Version: 1,1,0,10

I have a Wacom tablet and was unaware that there was as plugin interacting with my Chrome. On my laptop this plugin was also installed where I was having the issue. I also have installed drivers for a USB touchscreen mini monitor I have but I haven't seen any Chrome plugins for it. Anyone else have the Wacom plugins in Chrome or a MIMO Monitor driver installed to their OS?

But, besides that. Both the next/previous arrows and the pagination buttons are working for me with the develop branch.

@larsbo

526ebcd, Windows 8, touch device:
arrows, pagination & swipe are working (Chrome, Firefox)
arrows & pagination are working, swipe doesn't (IE10)

@mattyza
Owner

Thanks @larsbo.

We are currently working on swipe events in IE10 on touch devices as well over at #519.

Please refer to this issue where we can continue correspondence (this seems to be the same issue as #519).

Thanks. :)

@mattyza mattyza closed this
@Lytah

I've had this same bug (navigation elements unresponsive to clicking) for flexslider and a few other jquery implementations on the web for the past couple of months. My desktop machines do not have any touchscreen monitors, and uninstalling the Wacom tablet drivers from my work machine did not fix the issue.

Turning off the touch options in chrome://flags/ fixed it completely.

I do have Chrome sync turned on, and I have an android phone on which I use chrome. I wonder if using the android device is what turned those options on by default, thereby breaking flexslider on the desktop versions of Chrome.

ETA: Windows 7, Chrome 25.0.1364.172

@ymp

i still see this issue, even on the demo on the woothemes website: http://flexslider.woothemes.com/
the touch action operates the slider, but the mouse click does not.

windows 8, chrome 28.0.1500.95

@mattyza
Owner
@ymp

which version of flexsider is the latest, and which one is on the demo?

@mattyza
Owner
@natezander

I am having this same issue on Firefox/Windows 7 on a fancy laptop with a touch screen. What is the equivalent firefox command to disable touch (about:config is like chrome://flags but I'm not sure which setting to change)?

@tonybrasunas

I'm still seeing this issue in Chrome 30. On a windows 7 machine with touchscreen capability.

Does Not Work:
Navigating with a mouse, the previous and back buttons do not work in Chrome.

Does Work Fine:
All navigation and paging behavior is functional in firefox and IE10.
Automatic timed paging works in Chrome.

@fauzanrani

Guys,
Anybody still got this thing hanging on your neck?

To work around this, do the following two things:

In "flexslider.css" line 25: .flexslider .slides > li Comment out or remove -webkit-backface-visibility: hidden;
In the flexslider initialization script: Specify 'useCSS : false' in your slider options*

Try this, i found it here:
http://stackoverflow.com/questions/13101811/flexslider-really-messing-up-my-webpage-in-chrome

This solve mine.

@cssguru

I am having the same issues in Chrome.

I've tested at the following:

http://www.ispot.tv/ad/7T_Q/wonderful-pistachios-super-bowl-2014-sell-themselves
http://flexslider.woothemes.com/basic-carousel.html

My environment:

Browser: Chrome 32 
OS: Windows 8.1
Touchscreen: No

In the test suggested above I got back:

"ontouchstart" in window
true

window.DocumentTouch
undefined

document instanceof DocumentTouch
ReferenceError: DocumentTouch is not defined

"ontouchend" in window
true

I disabled all plugins and it did not fix it.

I'm not sure where Web Inspector options ("Emulate touch events") are located but I'm pretty sure I never enbabled it.

Under chrome://flags ("Enable touch events") it is set to Automatic. I've never been in there before, but disabling it did make the buttons work.

It works fine in Firefox 27.

Going to Modernizer, I do see that it returns Touch.

@cssguru

So weird thing... I just rebooted and found that the slider now works. Still it would be nice if the slider was built in way that even in the browser says its a touch enabled device that mouse events would still work.

@celvakumar

Finally Issue fixed by SoftUp Team - http://www.softup.in

Use Flexlider.js v2.0 then

Find & Replace the code in flexslider.js:

Find :
eventType = (touch) ? "touchend" : "click",

Replace:
eventType = "click touchend MSPointerUp",

@SeanKendle

You still have v2.0 on your demo website. I would highly recommend you move to v2.2+ if this issue is fixed, as I am still unable to use the navigation buttons in FF 35.0 and Chrome 39.0.2171.95 m

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.