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

[CyberAP]

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

 

[Mike]

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

 

[CyberAP]

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.

 

[Mike]

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.

 

[CyberAP]

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.

 

[Mike]

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.

 

[CyberAP]

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.

 

[CyberAP]

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

 

[CyberAP]

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.

 

[CyberAP]

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.

 

[Mike]

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]

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