While doing some testing for cross-browser compatibility on a few of my recent articles/tutorials, I came across some odd behaviour in Opera 10.53 when styling a list of links as block-level elements.
I haven’t done enough testing, but it could be that this problem is occurring on pages with very little content, because I’ve only seen the bug on my demo pages, which are usually bare-minimum HTML and CSS.
Nonetheless, this is quite an interesting bug that was confirmed by at least one of my Twitter followers, and which, after poking around a little bit, I was able to resolve, but I thought I’d share it since it is quite interesting.
A Frozen FOUC?
If you view the demo page in Opera 10.53, you’ll see two rows of links styled as block elements with visible borders. You should see the first link appearing unstyled when the page first loads. This is similar to what’s referred to as a flash of unstyled content — except that it’s not just a flash; it’s frozen like that until you mouse over it. No matter how often the page is refreshed, the problem persists. The screenshot below shows what the bug should look like when the page is viewed in Opera 10.53:
Additionally, if you refresh the page, then mouse over any of the links, you’ll sometimes see the bug occur on the other links as well (although for me this only happened on the local page, not on the server demo). You’ll also notice that the
font-family setting is inherited correctly from styles on the body tag, but, as mentioned, the graphical styles on the link are not visible, and only become visible after a mouse over.
The page validates, and the CSS validates, so it’s not related to any page errors. The Twitter follower I mentioned said the problem doesn’t appear on Opera 10.1, so it does seem to be version specific.
The Bug Resolved
I decided to mess around with the code a little bit to try to find out what was causing it — then I finally figured it out. In order to give everyone a chance to figure it out on their own, I’m not going to reveal the answer. If you figure it out, post a comment. All the CSS is in the head of the document, so you can just view source and copy it if you want to mess around with it.
And to be honest, I’m not completely sure if this really is a “bug” in the technical sense, but I can see it potentially happening and going unnoticed since Opera is often not checked for compatibility. It certainly happened because of something I got in the habit of doing, and I can’t figure out if my “habit” is wrong. I’ll explain what I mean when I reveal the answer, because I think it would be a good topic for discussion.
On a side note, isn’t it somewhat refreshing to see browser bugs occur in something other than… well… you know.