CSS first-letter pseudo class breaks whole page if background image is set

RESOLVED INVALID

Status

()

Core
Layout: View Rendering
RESOLVED INVALID
7 years ago
7 years ago

People

(Reporter: Matthew, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 obsolete attachment)

(Reporter)

Description

7 years ago
User-Agent:       Mozilla/5.0 (Windows NT 6.0; rv:2.0.1) Gecko/20100101 Firefox/4.0.1
Build Identifier: Mozilla/5.0 (Windows NT 6.0; rv:2.0.1) Gecko/20100101 Firefox/4.0.1

Applying a background image to an element with a first-letter pseudo class causes the page to render all or mostly in black until the page is scrolled, text is selected, or tabs are switched.

Reproducible: Always

Steps to Reproduce:
1.) Create a webpage with the following code:

<html>
<head>
<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>

2.) Load the page in Firefox 4. It should render completely black.
3.) (Optional) Press CTRL + A; the paragraph will turn white but the rest of the page will stay black.
4.) Switch tabs then come back to the test page; the page will be rendered correctly.

Actual Results:  
The page renders all black until text is selected, the page is scrolled, or tabs are switched.

Expected Results:  
Normal rendering for first-letter pseudo classes, as in previous versions of Firefox.

The browser tab itself may also turn black where the page title would ordinarily appear until the page is rendered correctly.
(Reporter)

Updated

7 years ago
Version: unspecified → 4.0 Branch
Component: General → Style System (CSS)
Product: Firefox → Core
QA Contact: general → style-system
Version: 4.0 Branch → unspecified
Please attach a reduced Testcase showing your Issue.
https://bugzilla.mozilla.org/attachment.cgi?bugid=656692&action=enter
Component: Style System (CSS) → Layout: View Rendering
QA Contact: style-system → layout.view-rendering
He put one in the comment, that's good enough.
Created attachment 532307 [details]
reporter's testcase

This is the testcase described by the reporter. I don't see the problem on my machine though.
Matthew, what happens if you disable hardware acceleration in preferences?
(Reporter)

Comment 5

7 years ago
Timothy, it still happens with hardware acceleration disabled, but not every time (more like one in ten pageloads).  It does, however, still happen every time with several in-production pages I have on one of my websites.

In my tests today, the bug is far more likely to be encountered on files actually live on an Internet web server rather than on my local hard disk (which I regrettably forgot to try before filing the bug).
Thanks for testing. Does the problem occur for you in the testcase that I attached to this bug? If not please include a link or upload a testcase that does show the problem for you.
Keywords: regression
(Reporter)

Comment 7

7 years ago
Somehow the problem does not occur for me on the uploaded testcase you included.  However, here's an in-production page where the problem still occurs every single pageload on at least three separate computers (in two separate locations) running Firefox 4:

http://homeschoolenrichment.com/magazine/

Removing the background-image for the CSS classes "testimonial" and "pullquote" solves the problem.  Since I was able to reproduce this bug on at least one computer with the original test page, I assumed it was a stand-alone bug (i.e., not interacting with other CSS rules).
Attachment #532307 - Attachment is obsolete: true
I wasn't able to reproduce a problem on that page in Linux or in my Windows XP VM. Getting a regression window would help.
Keywords: regressionwindow-wanted
(In reply to comment #7)
> http://homeschoolenrichment.com/magazine/

What are the exact steps to reproduce for that page? Just load it?
(Reporter)

Comment 10

7 years ago
Sorry for the long delay in replying, some family-related issues came up.

I think I've found the problem. It's caused when the Adblock Plus extension is installed AND disabled for the current page.  (I could kick myself for not thinking to check extensions before my initial post.)
Thanks for reporting back.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 7 years ago
Keywords: regression, regressionwindow-wanted
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.