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.

Answer 1

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

    Content

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;
}