Search code examples
cssgoogle-chromesafariwebkit

Webkit submit button strange padding causing overlap

What it looks like in Chrome:
rendered

I have turned off all of my styles. Here are only styles from Chrome only. You can see the button has large padding vertically, not horizontally.

What Chrome thinks the paddings are
padding

The 7.273px left padding caused the whole button to be pushed to the right a bit, and that's why it is not aligned with the text field.

How it got that padding:
padding inheritence

Complete styles: all styles

I am unable to recreate it in JSfiddle: https://jsfiddle.net/cmqz4tpq/

<input id="user_id" name="user_id" type="text" value="0">
<br />
<input name="commit" type="submit" value="link">

Rest assured there is no float.

When I try to override the padding in element styles, it is not respected either.

Solution

  • After removing all stylesheets and javascripts, I found that this was caused by Webkit's buggy button rendering mechanism. Once we return to original zoom (command + 0 on Mac), the zoom returns to normal, and button will be rendered correctly with no overlap.

    This is not fixable via CSS :(

    It would be nice if someone can find url of related bug report.