3

TL;DR: the "click" listener is not accurate for table cells (td) and headers (th), seemingly listening beyond the cell's border when tapping on an iPad 2 with mobile Safari. Is this a known issue and is there a workaround?

Pretty specific question, and no sample code (there's no need). Hope somebody out there finds this question and has solved this problem before!

I have a table, built using DataTables.net and jQuery UI. That should be incidental, but I wanted to mention it anyhow. The table listens for click events (which I believe mobile Safari simply translates as taps) on a number of different elements, including row headers (for sorting) and certain cell contents.

Using Inspector on a Mac (to which the iPad is connected) I can clearly see that there are no accidentally overlapping elements in terms of padding, borders, margins, or even content that is "visibility: hidden" or anything like that. Besides, they are table cells with default behaviour; not simulations of table cells.

In the top row of actual data, if I tap anywhere in the upper half of the cell, it is actually tripping the listener for clicks in the row header. I zoom in to a ludicrous level so that I know I'm not accidentally nudging the header, and I have confirmed that the tap occurs entirely within the table cell, not the header above.

Does anyone know if there is a meta property or some CSS or even a JavaScript workaround for this lack of precision? At least half the time that I tap the cell, it's actually triggering the column sort (from a ghost header tap) instead.

The only thing I can think of as a workaround is to wrap the contents of each cell in a div or span, pad them away from the edges of the cell a bit, and hopefully artificially reduce the tap target area that way.

mg1075
  • 17,985
  • 8
  • 59
  • 100
Greg Pettit
  • 10,749
  • 5
  • 53
  • 72
  • This appears to be a common issue (not just with tables) across mobile platforms. In the past, I've solved this by listening for the native touch events (e.g., `ontouchstart`, `ontouchend`), or using a library like using [jQuery Mobile](http://jquerymobile.com/) and binding event handlers with `tap()` instead of `click()`. – quietmint Mar 08 '13 at 21:33
  • Thanks. I've heard that there are conflicts between jQuery Mobile and jQuery UI, so I haven't wanted to go that route. Looking at the answers here: http://stackoverflow.com/questions/4755505/how-to-recognize-touch-events-using-jquery-in-safari-for-ipad-is-it-possible to see if any are helpful. – Greg Pettit Mar 08 '13 at 22:19
  • Are the column header and cell listeners being triggered together? If they are both triggered maybe performing a check that the tap location is inside the element would work. – Nathan Breit Jul 09 '13 at 22:26

1 Answers1

0

If the x,y coordinate is outside of the table then can you not simply ignore it?

If the click is inside the table, and the x,y coordinates are wrong then that might be a scaling issue, or a bug.

erikvold
  • 15,988
  • 11
  • 54
  • 98