CSS parsing problems in FF 14.0




6 years ago
6 years ago


(Reporter: Phil Evans, Unassigned)


14 Branch

Firefox Tracking Flags

(Not tracked)




6 years ago
User Agent: Mozilla/5.0 (X11; Linux i686 on x86_64; rv:14.0) Gecko/20100101 Firefox/14.0
Build ID: 20120628060610

Steps to reproduce:

I have CSS rules such as (in this order)
-moz-border-radius: 6px;
-o-border-radius: 6px;
-webkit-border-radius: 6px;
-ms-border-radius: 6px;
border-radius: 6px;

Actual results:

On Firefox 14, the border-radius directive was no longer parsed. An error was reported in the web console saying that the "-moz-border-radius" rule was not recognised and dropped, but nothing referring to the generic "border-radius" rule. 

If I move the "border-radius" rule to appear before the "-xxx-border-radius" list it works, but I don't see what I should have to do that. I do not want to remove the -moz form as I want to keep the website compatible with older browsers.

Expected results:

The border-radius setting should have been processed regardless of its order in the CSS list for the element in question.

Comment 1

6 years ago
border-radius has been unprefixed in Firefox 13.

Comment 2

6 years ago
Border-radius should still work, even though -moz-border-radius is no longer recognised. Could you attach a minimal example test page that demonstrates the problem?

This example HTML works as expected (displays rounded corners) for me with the rules in that order:

div {
border:solid #000 1px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
-webkit-border-radius: 6px;
-ms-border-radius: 6px;
border-radius: 6px;


Comment 3

6 years ago
And, btw, safe your time and just use plain border-radius only.

-ms-border-radius and -o-border-radius is nonsense
because Microsoft and Opera don't have and never had support for this.

You don't need -webkit- and -moz- prefixes either
(expect you want to support fairly outdated browsers).

Comment 4

6 years ago

This gets weirder, because if I create a simple example, the problem is not present. So perhaps it's easier if I just point you in the right direction:

The floating div to the right, on my FF14 install, has square edges. On a colleague's older FF3.0.19 (so yes, I do have to support these much older versions) they are still rounded. I only noticed the edges going square after upgrading to FF14.0, but I can't guarantee that's when it broke.

The current CSS rule for that div is:
  width: 150px;
  height: 590px;
  margin: 3px 10px 50px 10px;
  padding: 0;
  float: right;
  border: 1px solid black;
  text-align: center;

  -moz-border-radius: 6px;
  -webkit-border-radius: 6px  
  border-radius: 6px;

  box-shadow: 5px 2px 2px #BBB;
  -moz-box-shadow: 5px 2px 2px #BBB;
  -webkit-box-shadow: 5px 2px 2px #BBB;

But if I move the "border-radius" rule above the "-moz-border-radius" one I get my rounded border back. 

The #recent Div has inherited from both body and a parent div, but all it's inherited are font-size, font-family and color, and I don't see why inheritance should break the parsing.
Also, I know this used to work, and still does on FF3!

If I use the "Inspect" tool, select the div#recent, and view the style, FF does not report a "border-radius" at all; if I move the rule to above the -moz version then it does!

This is FF14.0 on a linux (Kubuntu 12.04) machine. I installed FF from the ubuntu ppa mozillateam/firefox-next.

(And thanks for the heads up on -ms and -o; I tend to include them for any CSS3 rule instead of looking up every rule separately, but have removed those ones for now. And, alas, I do have users on very out of date browsers so I need to keep the old -moz rules....)

Comment 5

6 years ago
-moz-border-radius: 6px;
-webkit-border-radius: 6px  
border-radius: 6px;

Missing ;
Last Resolved: 6 years ago
Resolution: --- → INVALID

Comment 6

6 years ago
Oh boy. How embarrassing. Sorry to waste your time.
You need to log in before you can comment on or make changes to this bug.