Textarea padding inconsistency in Firefox and Chrome

Question

I have a padding on my textarea element and I would like the content to remain padded as you scroll within the textarea. It is working as expected in Firefox but not in Chrome. The below image shows the difference in output:

CSS:

textarea { 
    width: 250px; 
    height: 160px; 
    padding: 15px; 
    font-family: Arial; 
    font-size: 12px; 
    line-height: 18px; 
    border: 1px solid #CCCCCC; 
    overflow: auto; 
    resize: none;
}

In Chrome, the top and bottom padding only appears at the beginning and end of the text content. Here is a jsfiddle to demonstrate:

http://jsfiddle.net/LkE6f/

How can I make the padding in Chrome appear/render in the same way as it does in Firefox?

Answer 1

You could do something like this, it's not very flexible (fixed width), but you can expand on it. It fixes the issue in Chrome and doesn't break Firefox. It uses pseudo-elements on #container, which work in IE8+

textarea {
    width: 250px;
    height: 160px;
    padding: 15px;
    font-family: Arial;
    font-size: 12px;
    line-height: 18px;
    border: 1px solid #CCCCCC;
    overflow: auto;
    resize: none;
    display: block;
}
#container:before, #container:after {
    display: block;
    height: 15px;
    background-color: #FFF;
    position: absolute;
    left: 1px;
    width: 225px;
    content:'';
}
#container:before {
    top: 1px;
}
#container:after {
    bottom: 6px;
}

Here's a jsFiddle.

Update: Added display: block to textarea to fix IE positioning issue.

Update 2: Alternative solution which takes its width from the #container div and for which you'd need to set the right value based on the width of the scrollbar of the browser, the 17px value is ok in Chrome at the moment. A pro with this solution is that you can set the width of the textarea to anything by changing the width of the #container, and the pseudo-elements will scale accordingly. jsFiddle.

#container {
    width: 260px;
    margin: 20px auto;
    position: relative;
}
textarea {
    width: 100%;
    height: 160px;
    padding: 15px;
    font-family: Arial;
    font-size: 12px;
    line-height: 18px;
    border: 1px solid #CCCCCC;
    overflow: auto;
    resize: none;
    display: block;
}
#container:before, #container:after {
    display: block;
    height: 15px;
    background-color: #FFF;
    position: absolute;
    left: 1px;
    right: 17px;
    content:'';
}
#container:before {
    top: 1px;
}
#container:after {
    bottom: 1px;
}

Answer 2

Best answer:

Embrace the difference between browsers; the web is not uniform and your design will never be 100% identical across browsers.

Work around answers:

If you don't care about the scrollbar having a gap at the top and bottom, you can use borders and an outline like this.

OR

This can be achieved with a pseudo element, if you are happy wrapping each textarea in a div. Should display correctly on IE8+, FF and Chrome.

Have a fiddle!

HTML

<div class="textareaWrap">
    <textarea>Content</textarea>
</div>

CSS

textarea {
    position: relative;
    width: 250px;
    height: 160px;
    font-family: Arial;
    padding: 15px;
    font-size: 12px;
    line-height: 18px;
    border: 1px solid #CCCCCC;
    resize: none;
}
.textareaWrap {
    position: relative;
}
.textareaWrap:after {
    position: absolute;
    content:'';
    display: block;
    width: 232px;
    height: 15px;
    background: #FFF;
    z-index: 1;
    bottom: 5px;
    left: 1px;
}
.textareaWrap:before {
    position: absolute;
    content:'';
    display: block;
    width: 232px;
    height: 15px;
    background: #FFF;
    z-index: 1;
    top:1px;
    left: 1px;
}