-webkit-user-select: none; - does not work

Question

I am creating a site that will be viewed on the iPad, and I am trying to prevent the bubble for copy and paste from appearing when the user touches and holds the image, because I would like something to happen ontouchstart and ontouchend.

Here is my html

<img class="appImg" src="img/fundMobile.jpg" /> 

Here is my css

 .appImg{ -webkit-user-select: none; } 

As soon as I press and hold my iPad, the bubble still appears. Any ideas on how to fix this?

Answer 1

You can try including e.preventDefault() in the ontouchstart handler:

 yourElement.ontouchstart = function(e) { e.preventDefault(); } 

Answer 2

Your css is correct, but your css can still be cached, this is what I noticed a bit using iOS 6 UIWebViews, add the url parameter to your link, which should fix it after the update.

 <link href="styles.css?cache=123" rel="stylesheet" />