Webkit Input Placeholder Overflow Bug Fix

We’ve done a couple of responsive sites lately that use 100% width input fields throughout all viewport sizes and we’ve come across a very strange bug that until now had us stumped.

Initially we thought it only occurred in Mobile Safari, but we’ve since realised that it might be a wider Webkit issue. We found that the page displayed perfectly until the viewport was resized twice. On a mobile this might be switching from portrait orientation, to landscape, to portrait again, or on a desktop it might be sizing down your browser window, and then sizing it up again.

When you do the second ‘resize’ the page randomly appears to be really wide, showing a lot of whitespace on the right hand side and displaying scrollbars in whatever browser you’re using, which is really annoying. We trawled the internet for answers and eventually found only one article that helped us find the issue.

The problem seems to occur when you have an input field, with a percentage width declared, inside a floated container… so something like the following:

HTML

<div id="container">
    <form>
        <input type="email" placeholder="Enter your email address" />
    </form>
</div>

CSS

#container {
    width:100%;
    float: left;
}
input {
    width:100%;
    display: block;
}

If you remove the 100% width it fixes the problem, but for our responsive designs to look their best we can’t set a width in pixels, so this isn’t an option.

The solution is actually nothing to do with the CSS, and as far as we have tested it can’t really be fixed with CSS at all. The problem is with the placeholder text on the HTML. If you remove this then BOOM, the problem disappears! Very strange.

We like using placeholder text in the HTML, it’s useful to the users and nice and easy to add in, so we don’t want to get rid of it. We did have limited success by adding overflow: hidden to the form element like so:

form {
    overflow: hidden;
}

But that doesn’t always seem to work in mobile Safari…

Unfortunately the only way to get around the issue (that we’ve found) is either to not float the container (not usually possible), don’t use placeholder text (not ideal by any means) or use JavaScript to insert the placeholder text like the good old days.

It’s frustrating, but I’m happy we’ve at least found the cause, and hopefully the bug will get ironed out eventually.

UPDATE March 2013

We’ve found that the best way to fix this issue is to apply position:relative AND overflow:hidden to your container element like so:

form {
    position: relative;
    overflow: hidden;
}

Hurrah!

By Chris Skelton

Blog

UPDATE March 2013