I recently encountered a bug on one of my sites that has to be the weirdest thing I’ve ever seen. It was a major rendering issue on a single page — the main Showcase page at Accessites.org.
This bug was discovered and reported by Virginia DeBolt, a Macintosh computer OS 10.4 user running the version 2.0 Safari browser. The bug would only manifest itself on that system. Special attention was given to Accessites to ensure it was extremely accessible and cross-browser compatible, so this came as a shock. The result, however was an undeniably unreadable and horrible-looking page.
As you can see in the image floated to the right, The Mac OS10.4 Safari 2.0 render (the background of the image) was all blue, the page background image was peering through the content, and said content was messed up. You can see what it’s supposed to look like in the inset thumbnail. Also shown in this image, the zoomed-in part, you can see the tail of a comment:
-->. This was the big clue.
Since this was the only page affected, and the only theme affected didn’t help solve the matter. The markup was the same for all themes, and the site’s Home page had the same content plug-in, the RSS Newsmaker part of the GreenBeast CMS. Very strange. Still that comment tail was visible. Could it be something on that page that made it react to the page’s commenting this way?
I conferred with my friend and master CSS guru, Thierry Koblentz. He couldn’t really point out anything that was the sure-cause of the issue, but he did suggest removing nested hypens within two comments on the page. I was game to try anything. Adding a hyphen within a comment is fine, normally, as long as two consecutive hyphens aren’t used all is hunky-dory. Example:
<!-- adding a single hyphen - like this --> is fine.
<!-- adding a two consecutive hyphens -- like this --> is not.
In this circumstance I had two comments on the page with single hyphen nested within them. I removed them upon Thierry’s suggestion. Amazingly this fixed the problem. The whys and what-fors are still a mystery. The best I can tell, the comment was stopped after the first hyphen in comment one, in the head, then resumed after the second single hyphen in comment two, further down the page (right where the page began display in the screenshot). Why this was happening seems to be a browser bug (and something to do with that page and that page only), but is almost guaranteed to run even deeper than that. It’s fixed now but it doesn’t make sense. The markup, including those hyphenated comments, was the same as the Home page, yet the home page was fine. If you have an issue like this with a page, and you have single hyphens within comments like I did, remove them, test it, and let me know if this fix works for you.
Special thanks goes to Marco Battilana for suggesting I give it a name (new bug fame). The “Ugh” part of it is there for two reasons: To make it speakable, and that demonstrates the frustration part of this little issue.