Fixed XenForo_CssOutput::_handleRgbaReplacement() Mucking CSS3 Gradient Definitions

digitalpoint

Well-known member
If I have a CSS3 gradient definition like so:
Code:
background:#cbdcb3 linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%);

XenForo is adding things that are unnecessary (and invalid CSS)... the CSS given to the user ends up being this:
Code:
background:#cbdcb3 linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%);
background:#cbdcb3 linear-gradient(top, url(rgba.php?r=255&g=255&b=255&a=89) 0%, url(rgba.php?r=255&g=255&b=255&a=89) 50%, rgba(255, 255, 255, 0) 100%);
_filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#59FFFFFF,endColorstr=#59FFFFFF);

The first line is the original (and it stays thankfully), but the two extra lines shouldn't be there... Maybe check if we are within CSS definition that contains "gradient" or something? Because rgb[a] definitions are valid within gradient definitions, so they do not need to be converted to a URL like the method is doing...
 
Yeah, it doesn't break the existing CSS definition, just adds a bunch of invalid ones if you use rbg() or rgba() within your CSS gradient definitions.

And your styles DO have the invalid definitions as well...

Image%202012.07.01%202:01:47%20PM.png
 
Yeah, it doesn't break the existing CSS definition, just adds a bunch of invalid ones if you use rbg() or rgba() within your CSS gradient definitions.

And your styles DO have the invalid definitions as well...

Image%202012.07.01%202:01:47%20PM.png
Ah I checked with another browser; Opera doesn't parse the broken code.
 
Confirmed.

Your syntax is wrong, but it doesn't matter, bug exists even with correct syntax.

Correct syntax:
Code:
background: #cbdcb3 linear-gradient(to bottom, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%);
Changed "top" to "to bottom". See latest candidate recommendation section 4.1.
You should add vendor prefixes to your old version because unprefixed version isn't recognized by most browsers yet:
Code:
	background: #cbdcb3 -moz-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%);
	background: #cbdcb3 -webkit-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%);
	background: #cbdcb3 -o-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%);
	background: #cbdcb3 linear-gradient(to bottom, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%);

Bug behaves differently if used inside and outside of property, but in both cases it messes up syntax.
 
Top Bottom