I’ve found what I think is a bug with Firefox 4’s rendering of CSS of elements that include a background image on a first-letter pseudoclass.
Here’s a sample document that exhibits the bug on every installation of Firefox 4 I have access to:
<html>
<head>
<title>Firefox 4 first-letter CSS bug</title>
<style type="text/css">
p:first-letter {
background: url('/path/to/image.gif') no-repeat top left;
}
</style>
</head>
<body>
<p>This is a bit of a problem.</p>
</body>
</html>
The behavior I’m seeing is the page loads totally black, but will show the paragraph once some of the text is selected with the mouse or with CTRL + A. However, the rest of the page remains black.
On other real-world pages that contain this sort of code, scrolling may help things fill in sporadically over the page but not reliably.
Switching tabs and coming back to this one appears to correct the problem; the page will be rendered properly after that.
Particularly strange is the fact that, for me at least, even the browser tab often turns black in the middle where it would ordinarily display the title of the page.
The background image can be existent or non-existent; simply having the code present triggers the bug.
Has anyone else noticed this, or can anyone else reproduce it?