StackOverflow code snippet horizontal scrolling broken WebKit

Question

Seems the problem is localized to WebKit

Anybody else notice this?

All code snippets, not just a particular post;

YSOD Yellow Screen Of Death JavaScript RegExp - Syntax Error

Pass array to client side for display

are just a couple..

Answer 1

I made the word-wrap: break-word; style apply to the child <p> element of .post-text rather than the whole thing.

Answer 2

I think word-wrap:break-word; in the .post-text class in http://sstatic.net/mso/all.css?v=6534 is to blame.

  .post-text{
    width:660px;
    font-size:107%;
    margin-bottom:5px;
    margin-right:5px;
    line-height:130%;
    word-wrap:break-word;
  }
  .post-text hr{
    background-color:#ddd;
    color:#ddd;
  }
  .post-text a{
    color:#000;
    border-bottom:1px #000 dotted;
  }
  .post-text a:hover{
    color:#6C0000;
    border-bottom:1px #6C0000 dotted;
    text-decoration:none;
  }
  .post-text img{
    max-width:640px;
  }

I think the word-wrap:break-word; is not what we want there. Was it added recently?

WORKAROUND FOR CHROME:

• Add the stylish extension to Chrome

• Add a style with the following Code

  .post-text{word-wrap: normal; !important;}

Enable your new style.

And the scrollbars are back:-)

Answer 3

Re: Jeff Atwood

Post Overflow

Well and good, but can we add word-wrap to the pre tags too? The following fixes the issue.

pre {
    font-family:Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
    margin-bottom:10px;
    overflow:auto;
    width:auto;
    padding:5px;
    background-color:#eee;
    width:650px!ie7;
    padding-bottom:20px!ie7;
    max-height:600px;

    word-wrap:normal;
}

Answer 4

Here is what it looks like in Chrome 5.0.335.0 dev on Ubuntu 9.04. (Updated to 5.0.356.2 dev with no change.)

Since I hadn't updated Chrome in at least a few days (lazy, you know), I am fairly sure I have seen horizontal scrolling instead of wrapping with 5.0.335.0.

Answer 5

Not sure if it is related but suddenly today I am getting similar text wrapping in code blocks. I came to Meta to check if anyone else had seen the problem.

I'm using Fluid Version 0.9.6. Fluid is a site specific browser generator based on Webkit/Safari. Ie used it to generate a SSB for StackOverflow and I have been using the resulting SSB for months now without issue. I am posting mostly Objective-C code.

I've been posting just as I always have i.e. same formatting, same text editor etc but today suddenly I can't get code to format. It wan't to wrap the code like blockquoted text.

For an example, see this post: iPhone: How to Embed NSData in XML for Upload to Server?.

I gave up trying to post code in a couple of other post.

I'll do some checking with all my browsers to see if its general.

Answer 6

This seems to be a webkit related bug.

Answer 7

Code block display on the iPhone has also suddenly changed... Anyone else seeing this?

There hasn't been any software update to cause this, so is it an intentional change?