Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Emit transparent colors as rgba(0, 0, 0, 0)

See original GitHub issue

When using rgba(0, 0, 0, 0) or hsla(0, 0, 0, 0) in SCSS, the corresponding CSS shows transparent.

Apparently IE8 interprets rgba(0, 0, 0, 0) different from transparent. We needed this to fix a hover issue (see also http://stackoverflow.com/questions/3998917/ie8-div-hover-only-works-when-background-color-is-set-very-strange-why).

What to expect when defining rgba(0, 0, 0, 0) in SCSS and how can you force to compile to rgba(0, 0, 0, 0)?

Issue Analytics

State:
Created 8 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

1reaction

nex3commented, Jan 14, 2017

I’ve talked with Chris, and we’ve decided to officially drop support for versions of IE prior to IE9, which was the first to support rgba(). As such, we’ll start emitting all colors with no alpha component as rgba(0, 0, 0, 0) across the board.

1reaction

CaelanStewartcommented, Dec 16, 2016

I just encountered the same problem @bazzel, had me pulling out my hair when I just could not figure out why I couldn’t hover over an element. Turns out, under certain conditions, if you give an element background-color: transparent, no hover is triggered in IE10, but if I changed it to rgba(0,0,0,0) in the output CSS manually, it worked fine.

IMO, that is just another reason as to why the way a colour is defined by an author should be preserved throughout the compilation process.

Also, you can workaround this by doing: rgba(0, 0, 0, 0.0001).