Bug 111843

Summary: Search Cancel Button Clickable Zone Mismatch w/ Input Padding
Product: WebKit Reporter: Thomas Parisot <thomas.parisot>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: UNCONFIRMED    
Severity: Minor CC: dgmstuart, forms-bugs, thomas.parisot
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: Mac (Intel)   
OS: OS X 10.8   
Attachments:
Description Flags
Screen capture illustrating the problem.
none
Screenshot showing the magnifying glass (results-button) cut off none

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.