• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Fixed XenForo_CssOutput::_handleRgbaReplacement() Mucking CSS3 Gradient Definitions

digitalpoint

Well-known member
#1
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...
 

digitalpoint

Well-known member
#4
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...

 

Forsaken

Well-known member
#5
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...

Ah I checked with another browser; Opera doesn't parse the broken code.
 

Arty

Well-known member
#8
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.