Bug 111843 - Search Cancel Button Clickable Zone Mismatch w/ Input Padding
Summary: Search Cancel Button Clickable Zone Mismatch w/ Input Padding
Status: UNCONFIRMED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: Mac (Intel) OS X 10.8
: P2 Minor
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2013-03-08 03:52 PST by Thomas Parisot
Modified: 2015-01-23 16:35 PST (History)
3 users (show)

See Also:


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

Note You need to log in before you can comment on or make changes to this bug.
Description Thomas Parisot 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
Comment 1 Thomas Parisot 2013-03-11 02:56:00 PDT
Created attachment 192429 [details]
Screen capture illustrating the problem.
Comment 2 Duncan Stuart 2015-01-23 16:35:37 PST
Created attachment 245258 [details]
Screenshot showing the magnifying glass (results-button) cut off
Comment 3 Duncan Stuart 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)