Firefox displays horizontal scrollbars on <pre> element

[wolfy1339]

I made a page, but for some reason Firefox seems to be displaying a horizontal scroll bar on the <pre> element.
The only workaround i have found is to add the <code> element tag along with the <pre> element tag
Version of Firefox: 30.0
OS:Windows, Ubuntu 12.04.4
http://vps3.wolfy1339.tk/FuslVZ/noFix.html

http://www.picpaste.de/pics/fuslfaq.1403639917.jpg

[cvrebert]

@wolfy1339 Looks like your screenshot failed to upload.
What version of Firefox? What OS?

[cvrebert]

<meta viewport="width=device-width, initial-scale=1.0"/>

No, that's not the right syntax for that. It's supposed to be:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

[wolfy1339]

@cvrebert fixed viewport, added the OS's and version

[cvrebert]

I can't reproduce on Windows or Linux. Could you re-upload your screenshot?

[wolfy1339]

@cvrebert reuploaded, i'll make a new version without the workaround applied,
here's the link: http://vps3.wolfy1339.tk/FuslVZ/noFix.html

[cvrebert]

Okay, now confirmed on Windows & OS X Firefox.
IE11 & Chrome & Safari 7 do not show any scrollbar.

[hnrch02]

Applying white-space: pre-wrap; to the pre element fixes this. (That's what makes your previous fix work.)

[cvrebert]

But both Chrome and Firefox report that the <pre> has a computed style of white-space: pre, so why are the renderings differing in the first place?

[hnrch02]

Reading this MDN document and the spec it seems as if Firefox is behaving correctly while Chrome is implementing pre wrong.

[cvrebert]

Disabling the word-wrap: break-word style seems to make Chrome behave like Firefox.

Seems to fall under these WebKit/Chrome bugs:

• https://code.google.com/p/chromium/issues/detail?id=373502
• https://bugs.webkit.org/show_bug.cgi?id=38222

Don't know what, if anything, we should do about this.

[hnrch02]

/cc @mdo

[mdo]

Punting because bugs I suppose. (Reopen if I'm wrong or if someone is more interested in derping around on this one.)

[cvrebert]

@mdo If my understanding is correct, there's no reason for us to be setting word-wrap & word-break on <pre>, because <pre> has a default white-space: pre style (which we don't override).

[mdo]

@cvrebert Yeah, I probably added it for the docs awhile back. http://jsbin.com/nayaw/1/ looks fine without both properties.

[mdo]

Thoughts on removing those pre-v4?

[cvrebert]

It would be a behavior change in Chrome & Safari, but on the other hand, per this issue, the behavior was already inconsistent across browsers..

[mdo]

Yeah, I'll punt to after v4. It's one of those things that isn't really the buggiest of bugs.

[cvrebert]

@mdo Cool, add an entry in the Gist then.

[mdo]

Did right after I commented 😁.

[hnrch02]

Time to go hutin' for that secret v4 gist 😆

[caylorme]

I'm experiencing the same thing in a inside of a form-group div.
no amount of word-wrap: break-word will fix this.

[cvrebert]

@caylorme That's off-topic for this issue, which is about <pre>s.