UNCONFIRMED 111843
Search Cancel Button Clickable Zone Mismatch w/ Input Padding 
https://bugs.webkit.org/show_bug.cgi?id=111843
Summary Search Cancel Button Clickable Zone Mismatch w/ Input Padding
Thomas Parisot
Reported 2013-03-08 03:52:29 PST
Hi, it appears that an input[type=search] with a right padding does not deal well with the ::-webkit-search-cancel-button: the cancel button is clipped by the padding. If adding a right margin to make the cancel button visible, its display is now correct *but* the clickable zone of the cancel button does not match. I made this JSFiddle to showcase the problem: http://jsfiddle.net/oncletom/LdbkE/ Basically, the clickable zone is outlined in red. It should never be different than the cancel button drawing area. Reproduced on: - Chrome 25 Stable - Chrome 27 Canary - Safari 6.0.2 (8536.26.17) Not reproduced on: - Chrome Android
Attachments
Screen capture illustrating the problem. (34.13 KB, image/png)
2013-03-11 02:56 PDT, Thomas Parisot 		no flags
Details
Screenshot showing the magnifying glass (results-button) cut off (10.43 KB, image/png)
2015-01-23 16:35 PST, Duncan Stuart 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Thomas Parisot
Comment 1 2013-03-11 02:56:00 PDT
Created attachment 192429 [details] Screen capture illustrating the problem.
Duncan Stuart
Comment 2 2015-01-23 16:35:37 PST
Created attachment 245258 [details] Screenshot showing the magnifying glass (results-button) cut off
Duncan Stuart
Comment 3 2015-01-23 16:35:53 PST
This issue also applies to ::-webkit-search-results-button i.e. the magnifying glass which is added to search boxes when adding e.g. results=5 (Came across this issue through working with the Foundation css framework: https://github.com/zurb/foundation/issues/5755#issuecomment-71286537)
Note You need to log in before you can comment on or make changes to this bug.