770444 - CSS parsing problems in FF 14.0

Status: RESOLVED INVALID

(Firefox :: Untriaged, defect)

Description

[Phil Evans]

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

[Loic]

border-radius has been unprefixed in Firefox 13.
https://developer.mozilla.org/en/CSS/border-radius#Gecko_notes

Comment 2

[mjh563]

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:

<style>
div {
border:solid #000 1px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
-webkit-border-radius: 6px;
-ms-border-radius: 6px;
border-radius: 6px;
}
</style>

<div>x</div>

Comment 3

[j.j.]

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

[Phil Evans]

Hi,

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:
http://www.swift.ac.uk/xrt_curves/

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:
#recent  
{
  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

[j.j.]

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

Missing ;

Comment 6

[Phil Evans]

Oh boy. How embarrassing. Sorry to waste your time.