1. 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

Discussion in 'Resolved Bug Reports' started by digitalpoint, Jul 1, 2012.

  1. digitalpoint

    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...
     
    erich37 likes this.
  2. Forsaken

    Forsaken Well-Known Member

    I haven't had this issue and both xenBook and Imperial use CSS gradients.
     
  3. Steve F

    Steve F Well-Known Member

    I get the same results when trying to just use a rbga value as a background

    background.png
     
  4. digitalpoint

    digitalpoint Well-Known Member

    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...

    [​IMG]
     
  5. Forsaken

    Forsaken Well-Known Member

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

    digitalpoint Well-Known Member

    Yeah... can also just look in the actual CSS file too. :)
     
  7. Forsaken

    Forsaken Well-Known Member

    I only do that when I need to track down bugs I can see :p.
     
  8. Arty

    Arty Well-Known Member

    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.
     
  9. Mike

    Mike XenForo Developer Staff Member

    Sorted. :)
     
    digitalpoint and Slavik like this.

Share This Page