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

As Designed [1.2 beta 1] Setting semi-transparent background color resets background-image

Discussion in 'Resolved Bug Reports' started by CyberAP, Jun 19, 2013.

  1. CyberAP

    CyberAP Well-Known Member

    • Try going to Rich Text Editor style properties and open Editor Toolbar Button (Active) property.
    • Change background-color to something like rgba(0,0,0,0.5).
    • Go to any thread and click on editor button.

    The image of the button is lost. XenForo uses background shorthand property instead of more exact one: background-color.
     
  2. Mike

    Mike XenForo Developer Staff Member

    I don't think this is 1.2 specific. I don't think this will change as it has the potential to cause a lot of differences.

    The issue is that the intention when using the style properties is actually ambiguous. When you don't enter a background image, we treat that as saying "none" as it's more likely to be what the user wants (without necessarily knowing all of the CSS details). In this case, as it's an extra class being applied, that assumption isn't ideal.

    That said, I'm open to feedback. I appreciate that within style properties, it's not possible to make a background-color rule per se (unless we didn't translate background-color and simply left it in extra - that might be the best workaround).
     
  3. CyberAP

    CyberAP Well-Known Member

    If we don't want to set any background-image we can just specify 'none' in the image section. But when it's only the color that is set I don't think it is really convenient to interpret that as background-image: none;. So I see it a good solution to use just background-color property instead of background shorthand.

    I wrote 1.2 prefix because I only faced that issue in 1.2. Never happened before.
     
    shenmuee likes this.
  4. Mike

    Mike XenForo Developer Staff Member

    Wait, this is rgba specific. It's done this way so that we can emulate rgba support in browsers that don't support it. Not sure how best to handle this - might have to do it such that if you explicitly specify a background-color with rgba (such as through the extra box), it doesn't do the translation. This will need a fair amount of testing with the template editing though.
     
  5. CyberAP

    CyberAP Well-Known Member

    We can target IE8 in several ways:
    • Use CSS hacks — property: value\9;
    • Generate a separate CSS file for IE containing only hacks and use IE conditionals to connect that CSS.
    Second option is preferable, we won't need that extra code in the final CSS for normal browsers then.
     
  6. Mike

    Mike XenForo Developer Staff Member

    Well the point is that if you apply the hack in this situation for IE8, it'll just be totally broken there because it would take out the button image. Applying it across the board makes it more consistent.
     
  7. CyberAP

    CyberAP Well-Known Member

    Another way to do it: set a mixing color for background color. So for example if we set our background-color to rgba(0,0,0,0.5) and mixing color to #fff the result will be:

    background-color: #808080;
    background-color: rgba(0,0,0,0.5);

    Right now XF does this thing automatically (I don't know how). It's frustrating to set mixing color every time, so when it's not set there will be no fallback for IE, that simple. Sometimes we don't even need it.
     
  8. CyberAP

    CyberAP Well-Known Member

    Wait. How's that image is generated right now? It is just a plain color. We are we using an image there?
     
  9. CyberAP

    CyberAP Well-Known Member

    I think I figured it out. It just mixes input color with #fff. So it's not precise in the final result, especially if we use rgba(255,255,255,0.5) above dark background.

    And I am not talking about filter property. It's rgba.php that outputs this result.
     
  10. CyberAP

    CyberAP Well-Known Member

    Here is another consequence of using rgba.php + filter property for IE:

    For example I want my button to be semi-transparent and contain an image as well. In IE8 that button won't have my image, instead it'll be just pure gradient.
     
  11. Mike

    Mike XenForo Developer Staff Member

    In general, I'm going to tag this as designed for the reasons I explained above, though obviously there are some caveats. However, I have made 2 changes:

    1. Specific to this, I've increased the specificity of the image itself for the icon so that it can't be overridden by the default style properties.

    2. If you put a rgba background-color rule in the extra CSS box, it won't be translated into the standard style property background color, meaning the background-color -> background rule isn't triggered.
     
    CyberAP likes this.
  12. CyberAP

    CyberAP Well-Known Member

    That'll probably resolve most of confusing issues with this. Thanks.
     

Share This Page