Firefox rendering elements incorrectly (Hardware Acceleration issue)

Question

I built this wizard using only CSS. But is giving problem in new versions of Firefox. In Google Chrome and IE 9+ works perfectly. The problem seems to be the pseudo elements :after and :before

Here is a picture of the error:

And here a picture of how it works in Chrome and should work in Firefox:

Fiddle with the code: http://jsfiddle.net/2jZmr/1/

Update: I saw that the problem is not only with the version of Firefox, tested on two different computers with the same version of Firefox (v28) and one worked and the other did not. I've reinstalled Firefox on my machine and the problem persists. I also tested it on Firefox in Android 4.4.2 and it worked normally.

Update2: When I open firefox in security mode the error does not happen. But just disable all plugins, add-ons and themes does not correct the error.

Update3: I found the reason of error. The problem is Firefox hardware acceleration.

I follow this steps:

1. At the top of the Firefox window, click on the Firefox button and then select Options
2. Select the Advanced panel and the General tab.
3. Uncheck Use hardware acceleration when available.
4. At the top of the Firefox window, click on the Firefox button and then select Exit
5. Start Firefox the way you normally do.

But is it possible to change the css or perform some code via javascript to run in firefox with hardware acceleration turned on?

The alternative that will follow if not, will use images instead of CSS3.

Edit: My Firefox is now at version 32.0 and the problem continues.

Answer 1

I don't get the problem on my FF, but what you can try is to double the ':' before the pseudo-element :

Sometimes you will see double colons (::) instead of just one (:). This is part of CSS3 and an attempt to distinguish between pseudo-classes and pseudo-elements. Most browsers support both values.

Note: ::selection always starts with double colons (::). You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.

src : https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

Answer 2

Normal Class in CSS:

.myClass { 
    margin-top: 0px; 
} 

Use this CSS hack for Firefox:

@-moz-document url-prefix() { 
    .myClass { 
         margin-top: -9px; 
    }  
}