CSS Rgba Transparency Bug in Chrome

Chrome isn't correctly displaying rgba() styles in some element backgrounds... (no alpha blending)

Well, this is a very late answer, but maybe this'll still be of use to you (your site still seems to be up and running).

I have a should-work-for-you solution, assuming that you can modify one of your stylesheets. As to WHY you've encountered this problem ..? I can only speculate, because I don't know how to recreate your exact configuration.

The fix;

div[id^=mainMenuOverDiv] {
  background-color: rgba(128,128,128,0.9) !important;
}

I'm not a fan of using !important unecessarily, and you may be able to remove that by using greater specificity. I've tested this in Firefox, though and it seems to work - obviously, you'll want to substitute the actual rgba(x,x,x,x) values with your own.

You seem to be using some JavaScript (I'm assuming) which randomizes the DIV ID every time you hover over the menu - but the beginning remains consistent (i.e. one time it will be #mainMenuOverDivjkhasdfsd89f9f9sdfl3l4l34lfdbvbc, then the next, it'll be #mainMenuOverDivLSDklsdkmlzxncbzmxnc90234xcvassf). Using the 'starts with' CSS selector (as provided in the example), you can still isolate the menu despite this potential spanner in the works.

It's interesting (and probably insightful) that this even works, given that inline CSS usually can't be overridden.

As for why this is happening, one possibility is that some JavaScript generated code is not correctly porting over to the non-IE browsers. Alternatively, if you're using it anywhere, code minification may also break some functionality (and vary between browsers) - many minification plugins need to be tweaked for individual setups to ensure that everything continues to work fine as one size does not necessarily fit all. For example, you might find that on one site you can minify everything except the JavaScript, while on another site, JavaScript is fine, but you can't minify inline CSS, etc. Google Analytics code sometimes falls victim to this.

So to my eye, the issue possibly isn't to do with IE/Chrome/Firefox or Safari - transparency is working fine on all of them - I think it's most likely the way your code is being manipulated or delivered to the browser.

Hope that helps in some way. Let me know if you can't use an external stylesheet and I'll try to find an alternative.

Transparent color doesn't work inside Chrome

You're using a color code that isn't supported in Chrome that's why it's not correctly displaying on your browser.

Instead of using background-color: #ffffff1a on .form-control you should use a RGBA instead. In your case use rgba(255,255,255,0.101)

8-digit hexadecimal values are ignored as they are currently deemed invalid by Chrome's CSS parser.

You can always convert 8-hex colors into RGBA colors with this CodePen tool, credit goes to Terry

For more information on 8-digit hexadecimal values read this very interesting thread

Related Topics