[css3-background] Corner clipping and mouse events

In section 5.3 [1] css3-background specifies that border-radius trims the 
hit testing area, specifically:

# The content of replaced elements is always trimmed to the content edge 
# curve. Also, the area outside the curve of the border edge does not accept 
# mouse events on behalf of the element.

In our experience this behavior has proven to be of particular interest to 
application design in a touch environment. While the UI guidelines for various 
platforms recommend minimum touch target sizes for interactive elements those 
generally assume square or rectangular control shapes. Thus, rounding elements 
sized at or close to those guidelines can have an impact on real world hit-testing 
with touch devices; in particular when creating a custom circular control such as 
back or forward navigation buttons.

I suggest:

1. Adding a note for authors such as:

# As border-radius reduces the interactive area of an element authors should make
# sure the remaining hit-testing area conforms to recommended minima for the 
# platforms they target; in particular, conforming to recommended minimum touch
# target sizes may require larger widths and heights.

2. Update 5.3. to change 'mouse events' to a less device-specific name. Pointer
events?  Hit-testing events?


[1] http://dev.w3.org/csswg/css3-background/#corner-clipping

Received on Tuesday, 19 June 2012 21:18:26 UTC