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

Alex Milowski alex at milowski.org
Fri Mar 11 08:33:25 PST 2011


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


More information about the webkit-dev mailing list