Closed
Bug 770444
Opened 12 years ago
Closed 12 years ago
CSS parsing problems in FF 14.0
Categories
(Firefox :: Untriaged, defect)
Tracking
()
RESOLVED
INVALID
People
(Reporter: pae9, Unassigned)
Details
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.
border-radius has been unprefixed in Firefox 13. https://developer.mozilla.org/en/CSS/border-radius#Gecko_notes
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>
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).
Reporter | ||
Comment 4•12 years ago
|
||
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....)
-moz-border-radius: 6px; -webkit-border-radius: 6px border-radius: 6px; Missing ;
Status: UNCONFIRMED → RESOLVED
Closed: 12 years ago
Resolution: --- → INVALID
Reporter | ||
Comment 6•12 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.
Description
•