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.
I have it working by removing :link from the styling.
So it’s now ‘ul li a, ul li a:visited’
Interesing, because I fixed it by just adding “ul li, a”, and leaving a:link. I guess it works both ways. Good work.
The problem seems to be in the use of “a:link”. I tend to apply styles to all links rather than separately to link and visited.
It certainly is a bug though, Opera must not see it as a link until the hover state is enacted, when it then calls the a:link style, which then fixes it. Interesting find!
INTERNET EXPLORER!!!!!!!… There! I said it!!! *pants*
I get that bug too from the home page of [link removed]
I was never sure why but everytime i first load it in Opera, the list items never show up at all (the images in the jQuery slider). But after a refresh things get fixed…
Clervius, I don’t see the bug occuring on the link you posted, so I removed the link in case you’re just spamming. Nothing personal.
The bug is using opera. The fix is using a WebKit browser.
Opera is actually a really good browser, and I’m actually surprised that a bug like this went unnoticed.
@AlicanC i’m agree with you
Just to precise the bug seems to be fixed in opera 10.60 alpha…
I stopped checking for minor flaws in Opera and just check if the layout looks somewhat the same… Opera browser is a dying browser in my professional opinion. While the intensions with it may have been good, today it’s a thorn in my eye. A browser made out of mismatched components of trident and mozilla doesn’t belong on a market where unity and standards should be a top priority!
I started checking Opera lately for Mobile browser testing. Since we don’t have Opera Mobile, it’s just as quick to check Opera to see if anything is drastically off.
So your asking Opera stop making the most innovative and feature rich browser available? You are completely content with slow (ff) buggy (chrome) awful (ie) browsers. You also want opera to stop creating new features for other browsers to steal? (tabbed browsing, speed dial, mouse gestures to name a few)
Just making sure I got it right.
> A browser made out of mismatched components of trident and mozilla doesn’t belong on a market where unity and standards should be a top priority!
You’re completely right, and that’s why Netscape 9 didn’t succeed. But Opera isn’t based on either of them, which diminishes your overall argument somewhat.
It doesn’t appear to be the a:link, but the declaration of both styles simultaneously.
Separate the two styles into two declarations, or even just add a separate overriding declaration for the visited state, and it doesn’t occur, i.e:
ul li a:link { /* stuff */ }
ul li a:visited { /* repeated stuff */ }
or
ul li a:link, ul li a:visited { /* main styles */ }
ul li a:visited { color: #00f; }
wow, i have absolutely no idea how to fix this bug…
I think the bug is fixed in opera 10.60