I was recently finishing up the first phase of a blog site redesign when I noticed a missing 1-pixel-width dotted black border on the frame of a newsletter page. At the time, I was reviewing the site on a Windows machine using Iron (version 10.0.650.1), a Chromium fork. This was late in the development process, after all the obvious bugs had allegedly been ironed out, so I took a stroll through the other pages - and that dotted border was right there, present and accounted for. The frame HTML was the same in all of these pages; only the innermost content differed, and yet the border was there everywhere else, gone on the newsletter post.

On the whole, strange. I looked for the usual culprits: a div size pushed out unexpectedly so that it overlapped and obscured the border, an errant close tag, unexpected HTML inside the newsletter post, and so forth. But none of the above were an issue - and to make things more interesting, the dotted border displayed just fine on the newsletter page in all the other major browsers that the site was required to support. In Firefox, IE, and Safari, there it was. Yet it was gone in Iron and Chrome.

So I tinkered with the CSS and HTML a little, and quickly found that:

• Moving and removing elements in the DOM made no difference.
• Changing the border definition to "2px dotted #000000" or "1px dashed #000000" made it appear.
• Cutting out half of the newsletter content made the border appear.

At that point it clicked that this was something to do with the height of the div wrapping the newsletter content. The content was much longer than a typical blog post, and the newsletters were the only pages exhibiting the missing border. A little experimentation later, I had produced this small demonstration - some very wide divs with dotted margins wrapped in a hidden overflow div to keep it reasonably compact for show and tell.

If you're viewing this page in anything other than mid-2011 or earlier vintage Chrome on Windows, then the example above probably looks just fine to you - all three red-hued boxes have an upper dotted border. But in Chrome or Iron it's a different story. I've bumped up the dotted border to 2 pixels for visual clarity: below 8196px it works fine, and above 8196px it displays only that single blob in the top left. But the interesting point is the transition in the middle, right at 8196px - the drunken dotted border. Here is an image, for posterity and those who cannot see the effect:

I leave it as an exercise for those with more spare time than I to pore over the Chromium code and figure out how exactly this is happening - I see that the issue has been floating around as a reported bug for more than a year. I added my 2 cents to the comments, but I can't imagine that fixing this is terribly high on anyone's priority list, mine included, and such is life in the open source world.

What did I do with the blog site and the missing newsletter page dotted border, you might ask? Sometimes it's only possible to work around an issue in the time allotted, and so I simply switched to using a repeating background image of dots in a very thin, very tall div. Somewhat old-school, but practical.