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

Closed
webmandesign opened this Issue Sep 30, 2012 · 99 comments

Comments

Projects
None yet

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.

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!

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

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

Same issue, any fix for this yet?

suau commented Oct 19, 2012

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.

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.

Contributor

tylerxo commented Nov 16, 2012

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.

We're not turning on any emulation. We're visiting a flexslider site on a
desktop without touch support and we cannot navigate. The click event isn't
working.

Others are suggesting that the latest Chrome might be signaling that it's
touch capable even though it is not a touch device, like my desktop in Win
7 so click events for the slider are disabled since it thinks touch is
really available.

Currently the http://buffalowildwings.com site isn't working when firing up
our latest Chrome in Win 7 (Version 23 for me) on a non-touch device like a
desktop.

On Fri, Nov 16, 2012 at 1:55 PM, Tyler Smith notifications@github.comwrote:

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 https://github.com/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.


Reply to this email directly or view it on GitHubhttps://github.com/woothemes/FlexSlider/issues/351#issuecomment-10457639.

Contributor

tylerxo commented Nov 16, 2012

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.

I have to say that I had the same issue and I'm checking it now and it
works perfectly, on Win7, Chrome 23.0.1271.64 m. Even on my site, thank God.

2012/11/16 Tyler Smith notifications@github.com

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.


Reply to this email directly or view it on GitHubhttps://github.com/woothemes/FlexSlider/issues/351#issuecomment-10458624.

I'm on the same Chrome as ferlorenzo on Win 7: Chrome 23.0.1271.64 m

But it still doesn't work for me. I just tried it on my laptop with the
same Chrome and OS and it works fine there, which is weird.

I inspected the page on both machines and on my desktop where it's not
working, Modernizr is detecting touch so the html has a class of "touch"
while on my laptop the page has a class of "no-touch". Maybe its an
extension but I tested it in incognito too and it's not working, either.
Cleared the cache, too.

On Fri, Nov 16, 2012 at 2:25 PM, ferlorenzo notifications@github.comwrote:

I have to say that I had the same issue and I'm checking it now and it
works perfectly, on Win7, Chrome 23.0.1271.64 m. Even on my site, thank
God.

2012/11/16 Tyler Smith notifications@github.com

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.


Reply to this email directly or view it on GitHub<
https://github.com/woothemes/FlexSlider/issues/351#issuecomment-10458624>.


Reply to this email directly or view it on GitHubhttps://github.com/woothemes/FlexSlider/issues/351#issuecomment-10458700.

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.

I'm having the same issue still but my laptop running the same 64bit Win 7
version and the same Chrome version is working fine. Weird. Lots of
sliders aren't working for me on the web. If you inspect the page in
Chrome, and if the site is using Modernizr, you'll notice that Modernizr
thinks it's a touch browser. It adds a class of "touch" to the HTML tag on
my desktop but on my laptop it doesn't-- it adds a class of "no-touch" so
Chrome is still telling it that it's a touch device. I restarted my
computer and cleared my cache and I still can't get flexslider to work
right on any site using it on my desktop. I'm kinda hoping it just irons
itself out.

On Mon, Nov 19, 2012 at 1:48 AM, Cory Schadt notifications@github.comwrote:

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.


Reply to this email directly or view it on GitHubhttps://github.com/woothemes/FlexSlider/issues/351#issuecomment-10502758.

@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 commented Nov 26, 2012

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.

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.

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.

@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",

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

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";
}
}

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

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.

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.

Contributor

tylerxo commented Jan 8, 2013

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

Really? I dunno-- I don't launch Chrome with any special command line
flags... I checked my Developer Tools and "Emulate touch events" is NOT
checked. I just tried it in an incognito window on Chrome 23.0.1271.97 m
(Win7) and it still doesn't work. Also, I just tried the demo at
http://flexslider.woothemes.com/ in Firefox 18 (Win7) and it's not working
there either.

Chrome Incognito doesn't use extensions or cache or cookies so it's not
those I guess.

Something IS up... I mean, even on the Flexslider homepage there's some
tweets on there of people complaining it's stopped working for them, too:
https://twitter.com/norman_posselt/status/288601958405795840

Something doesn't make sense but I'm really not sure it's our own settings.
It used to work for me in Firefox-- now it does not.

It's got to be a Windows thing-- I've tested it on Chrome 23.0.1271.97
(Linux) and Firefox 17.0.1 (Linux) and it works fine.

On Tue, Jan 8, 2013 at 5:14 PM, Tyler Smith notifications@github.comwrote:

@thetrickster https://github.com/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 @zanderwaldmanhttps://github.com/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.


Reply to this email directly or view it on GitHubhttps://github.com/woothemes/FlexSlider/issues/351#issuecomment-12020352.

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

To any user experiencing this issue on a website-- it seems completely
broken.

On Tue, Jan 8, 2013 at 5:23 PM, wonderment notifications@github.com wrote:

@mbmufffin https://github.com/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).


Reply to this email directly or view it on GitHubhttps://github.com/woothemes/FlexSlider/issues/351#issuecomment-12020711.

Contributor

tylerxo commented Jan 8, 2013

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

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

Can't tell anything from the screenshot, though. The whole point is that
the slider LOOKS fine and scrolls automatically if it's set to auto
scroll-- but when you click the left or right arrows and/or the pager
circles underneath, they don't trigger the slide to move.

On Tue, Jan 8, 2013 at 5:29 PM, Tyler Smith notifications@github.comwrote:

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

[image: Screen Shot 2013-01-08 at 2 28 01 PM]https://f.cloud.github.com/assets/977577/51885/b7b685fa-59e2-11e2-91c4-e53f6d5be80d.png


Reply to this email directly or view it on GitHubhttps://github.com/woothemes/FlexSlider/issues/351#issuecomment-12020981.

Contributor

tylerxo commented Jan 8, 2013

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.

I just walked into my brother's room and checked his desktop (Win7) Chrome
is up-to-date and it is working there.

I wonder what setting we all have that is throwing it all off... maybe an
extension? I'm going to remove all my extensions from Firefox and Chrome
and see what happens.

On Tue, Jan 8, 2013 at 5:35 PM, Tyler Smith notifications@github.comwrote:

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.


Reply to this email directly or view it on GitHubhttps://github.com/woothemes/FlexSlider/issues/351#issuecomment-12021256.

I disabled all Extensions/Add-ons in Chrome and Firefox for Win7 and
http://flexslider.woothemes.com still isn't functioning. My head's gonna
'splode!

On Tue, Jan 8, 2013 at 5:39 PM, Chris Matthias chris.matthias@gmail.comwrote:

I just walked into my brother's room and checked his desktop (Win7) Chrome
is up-to-date and it is working there.

I wonder what setting we all have that is throwing it all off... maybe an
extension? I'm going to remove all my extensions from Firefox and Chrome
and see what happens.

On Tue, Jan 8, 2013 at 5:35 PM, Tyler Smith notifications@github.comwrote:

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.


Reply to this email directly or view it on GitHubhttps://github.com/woothemes/FlexSlider/issues/351#issuecomment-12021256.

@mbmufffin

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

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

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.

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

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

Contributor

tylerxo commented Jan 8, 2013

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

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.

Contributor

tylerxo commented Jan 8, 2013

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.

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

Contributor

tylerxo commented Jan 8, 2013

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

I just did the Modernizr Touch test at
http://modernizr.github.com/Modernizr/touch.html on my suspect Chrome
browser and I got "Yes" for everything except for the "typeof Touch ==
"object" and that's "No"

WHEREAS, for non-offending browsers (my laptop on Chrome Win7) I get "No" across the board.

On Tue, Jan 8, 2013 at 6:02 PM, Tyler Smith notifications@github.comwrote:

@wonderment https://github.com/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.


Reply to this email directly or view it on GitHubhttps://github.com/woothemes/FlexSlider/issues/351#issuecomment-12022339.

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

@thetrickster Same for me.

There's an update on that Modernizr Touch test that links to more
discussions on the issue... maybe smarter folks can read those and see if
it relates to the flexslider issue:
http://modernizr.github.com/Modernizr/touch.html

On Tue, Jan 8, 2013 at 6:06 PM, wonderment notifications@github.com wrote:

@thetrickster https://github.com/thetrickster Same for me.


Reply to this email directly or view it on GitHubhttps://github.com/woothemes/FlexSlider/issues/351#issuecomment-12022621.

smolak commented Jan 11, 2013

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.

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?

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.

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.

The problem isn't tied to modernizr. It has been pointed out that all
scenarios where this is happening and the site uses modernizr, it adds the
class "touch" you the body of the page. So I ran the test to also show
that affected browsers will show true in some places on the test where it
should be false across the board. No one is sure why this problem is
happening. It works on some machines south the same setup as others that
are affected.

Editing the vendor code is a bad idea. But I guess that its that's your
only option, you have no choice.

Woothemes think it's on our end and they haven't mentioned escalating this
issue for serious review.
On Jan 11, 2013 7:15 PM, "wonderment" notifications@github.com wrote:

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?


Reply to this email directly or view it on GitHubhttps://github.com/woothemes/FlexSlider/issues/351#issuecomment-12169872.

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.

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.

On 17 Jan 2013, at 19:18, zanderwaldman notifications@github.com
wrote:

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.

Yes, that's exactly the problem.

Due to some alleged iOS bug (I've asked via the ticket what that bug is, but with no reply) the code incorrectly assumes that if your browser reports touch support that you no longer need "mouse" or "click" event support.

The fix should not involve tweaking browser settings - it requires the FlexSlider code to stop assuming that touch support is mutually exclusive with other input devices.

That assumption is only true on tablets and phones, and even then only half true, since every such device I've tried is also perfectly capable of synthesising a "click" event. They have to otherwise any site that uses plain W3C click handlers would fail to work on mobile devices.

Ray

Contributor

tylerxo commented Jan 17, 2013

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.

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

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

Contributor

tylerxo commented Jan 17, 2013

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

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

Contributor

tylerxo commented Jan 18, 2013

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

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

Contributor

tylerxo commented Jan 18, 2013

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

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

smolak commented Jan 18, 2013

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.

Contributor

tylerxo commented Jan 18, 2013

@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 commented Jan 18, 2013

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

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)

Contributor

tylerxo commented Jan 18, 2013

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

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?

Contributor

tylerxo commented Jan 18, 2013

@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?

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

Contributor

tylerxo commented Jan 19, 2013

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

larsbo commented Jan 21, 2013

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/

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.

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.

Well I do not have a touchcreen laptop or desktop. But I DID install a USB
touchscreen device from MIMO (http://mimomonitors.com) which might be
causing my browsers to think it's partially touch enabled.

It's good to know its likely only a small subset seeing this issue, but I
think it brings to light that there are some serious problems with the way
"touch" is detected-- it's not foolproof as we can see here. Even though
its a small number, we need to figure out a way to have this working for
people whos browsers incorrectly report that it's touch enabled.

On Thu, Jan 31, 2013 at 3:17 AM, philsward notifications@github.com wrote:

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


Reply to this email directly or view it on GitHubhttps://github.com/woothemes/FlexSlider/issues/351#issuecomment-12932080.

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

Contributor

tylerxo commented Feb 1, 2013

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

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

Owner

mattyza commented Feb 9, 2013

@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 commented Feb 9, 2013

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 👍

Owner

mattyza commented Feb 9, 2013

Thanks for confirming this on your end, @larsbo.

Seems to be working again in Chrome 24.0.1312.57 m.

I guess its always worked for me in Chrome (I've never mucked around with
the settings though). It doesn't seem to work for me on the mobile
devices. Swiping works fine, but my nav arrows never seem to fire when I
tap them. Using the develop branch for my testing currently. Haven't
ruled out that its something I'm doing.

Arrows work fine obviously when I resize my browser, so I don't think I
have any "z-index" type issues, etc.

On Mon, Feb 11, 2013 at 8:09 AM, George Gooding notifications@github.comwrote:

Seems to be working again in Chrome 24.0.1312.57 m.


Reply to this email directly or view it on GitHubhttps://github.com/woothemes/FlexSlider/issues/351#issuecomment-13381350..

http://www.sudovi.com/
http://www.twitter.com/lifewithryan
http://www.thecommontongue.com
http://www.lifewithryan.com/

Owner

mattyza commented Feb 15, 2013

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.

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 commented Feb 19, 2013

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

Owner

mattyza commented Feb 19, 2013

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 Feb 19, 2013

Lytah commented Mar 21, 2013

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-zz commented Aug 13, 2013

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

Owner

mattyza commented Aug 13, 2013

That demo is most likely out of date.

Thanks for bringing this to our attention.

Matt Cohen
Chief Product Officer at WooThemes

http://woothemes.com/
http://matty.co.za/

On Tuesday 13 August 2013 at 5:19 AM, ymp wrote:

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


Reply to this email directly or view it on GitHub (woothemes#351 (comment)).

ymp-zz commented Aug 15, 2013

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

Owner

mattyza commented Aug 15, 2013

2.1 is on the demo. 2.2, on the master branch, is the latest.

Matt Cohen
Chief Product Officer at WooThemes

http://woothemes.com/
http://matty.co.za/

On Thursday 15 August 2013 at 2:56 AM, ymp wrote:

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


Reply to this email directly or view it on GitHub (woothemes#351 (comment)).

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

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.

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.

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.

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.

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",

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