[webkit-dev] Selection Highlight for Canvas Rendering Object on Mobile Platforms?

[David Hyatt]

-webkit-tap-highlight-color: transparent is what you need I suspect (at least for iOS).

dave
(hyatt at apple.com)

On Mar 11, 2011, at 10:33 AM, Alex Milowski wrote:

> I'm not sure this is exactly the right place to start, but I'll start
> here since the intersection of Andriod, iOS, and other developers are
> here.
> 
> I've been testing some ideas for using the HTML5 canvas on mobile
> platforms versus desktop and I've notice an annoying "feature" on the
> mobile platforms.  It is most noticeable on Android but also shows up
> on iOS on the iPad or iPod touch devices.
> 
> The application involves the use of a HTML5 canvas that intercepts
> touch events on the canvas.  Areas of a geometric image changes
> shading when touched to represent fractions of the object.  On both
> platforms, there seems to be something about focus from the touch even
> that causes a highlight for the whole box containing the canvas
> element.
> 
> On iOS, a gray shaded version of the canvas shows up for a very, very
> short period of time.  It is inconsistent and depends how long the
> touch gesture is on the canvas.  Some very short touch gestures do now
> cause the highlight of the canvas.  That may be because it is just too
> short of a period of time to draw the highlight.
> 
> On Andriod, any touch gesture cases a border and highlight around the canvas.
> 
> Both are undesired effects.
> 
> I'm trying to understand why the canvas has special highlight features
> for touch gestures over any other rendering object. Looking at the
> code, the highlight seems to be from the fact that RenderHTMLCanvas
> inherits from RenderReplaced just like RenderImage does.  It all seems
> to key off of whether the canvas is selected.  But the highlight isn't
> there for mouse clicks on desktop platforms.
> 
> None of the CSS tricks (e.g. -webkit-user-select: none) seem to help
> on mobile platforms.
> 
> It seems to me that on touch-enabled platforms (e.g. mobile) you
> should be able to disable this selection highlight behavior for canvas
> somehow.
> 
> -- 
> --Alex Milowski
> "The excellence of grammar as a guide is proportional to the paucity of the
> inflexions, i.e. to the degree of analysis effected by the language
> considered."
> 
> Bertrand Russell in a footnote of Principles of Mathematics
> _______________________________________________
> webkit-dev mailing list
> webkit-dev at lists.webkit.org
> http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev