Re: [webkit-dev] Selection Highlight for Canvas Rendering Object on Mobile Platforms?
Hi Guys, I too have that Problem in my Android device. This highlighting effect is not desirable one when touching event occurs. If you could find out the solution for. Kindly let me too know it. It will help me a lot in going ahead. Hoping to receive your reply eagerly.. Regrads, Wilson Francis ___ webkit-dev mailing list webkit-dev@lists.webkit.org http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
[webkit-dev] Selection Highlight for Canvas Rendering Object on Mobile Platforms?
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@lists.webkit.org http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
Re: [webkit-dev] Selection Highlight for Canvas Rendering Object on Mobile Platforms?
-webkit-tap-highlight-color: transparent is what you need I suspect (at least for iOS). dave (hy...@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@lists.webkit.org http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev ___ webkit-dev mailing list webkit-dev@lists.webkit.org http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
Re: [webkit-dev] Selection Highlight for Canvas Rendering Object on Mobile Platforms?
On Fri, Mar 11, 2011 at 3:35 PM, David Hyatt hy...@apple.com wrote: -webkit-tap-highlight-color: transparent is what you need I suspect (at least for iOS). Yes, that does fix it for iOS. Thanks! On Android, there is still some selection behavior but it is now slightly different and happens, oddly, every other tap. :( -- --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@lists.webkit.org http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
