Textarea and div padding differences in Firefox

Question

I made a fiddle here. http://jsfiddle.net/pmVeR/

The textarea and div render identically in both Safari and Chrome. But in Firefox, there is an extra 2px padding on the right of the textarea, which affects the word wrapping.

What's also mysterious is that without white-space: pre-wrap; this extra padding seems to vary depending on the width of the element.

I can fix this by detecting FireFox and adding padding-right:2px to my div, but I would like to know if this can be fixed without a browser hack?

CSS

div, textarea {
    font-family: Courier;
    font-size: 14px;
    margin: 0;
    padding: 0;
    outline: 0;
    resize: none;
    border: 1px solid black;
    width: 282px;
    height: 80px;
    white-space: pre-wrap;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

HTML

<textarea>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</textarea>
<div contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</div>

EDIT

The example I provided above is fixed width so you'd be able to see the problem but I need it to work for expanding widths too like this. http://jsfiddle.net/pmVeR/6/

Works fine for me - both Chrome (26.0.1410.64) and Firefox (20.0.1) show both elements as the same width with text wrapping at the same characters. — Ken Herbert, May 13 '13 at 02:53
same for me. A possible fix may be to specifically add padding. 'padding:4px;' for example. — lukeocom, May 13 '13 at 08:06
@lukeocom - If you play around with the `width` you should be able to get the problem to show up, I can see it by setting `width: 275px;` in FireFox. — Mathijs Flietstra, May 13 '13 at 08:19

score 0 · Answer 1 · answered May 13 '13 at 09:16

0

you can use reset css for that too.

answered May 13 '13 at 09:16

dsfg

130
9

score 0 · Accepted Answer · edited May 23 '17 at 11:55

0

I can reproduce the described behaviour on Firefox 20.0.1 using this jsFiddle.

I have had a bit of a look around for you, it seems that Firefox has had quite some issues with paddings in combination with textareas in the past, so I'm thinking you might not be able to get rid of it.

I'm not sure if you would class vendor specific prefixes as a browser hack, but I've got one for you.

You can add -moz-padding-start: 2px; and -moz-padding-end: 2px; to your CSS rule, that will fix your wrapping issue: jsFiddle.

edited May 23 '17 at 11:55

Community

1
1

answered May 13 '13 at 13:34

Mathijs Flietstra

12,900
3
38
67

Thanks! This was the prefix I was looking for but you only want to apply it to the div. http://jsfiddle.net/pmVeR/7/ Also, whatever the padding is for the div/textarea you need to add 2px to -moz-padding-end. In my example I changed the padding to 4px so -moz-padding-end is 6px. Also in your fiddle you removed "white-space: pre-wrap;" but this needs to stay. – Berry Blue May 13 '13 at 18:08
I have updated the answer, there was some more padding going on. I don't think `white-space: pre-wrap;` makes a difference for the behaviour, but I have added it again anyway. – Mathijs Flietstra May 15 '13 at 22:36

Textarea and div padding differences in Firefox

2 Answers2

Linked