Search code examples
iphonecsscolorstransparency

Hex transparency color not visible on iPhone (safari/Chrome)

Scenario :

  • Built an Angular 6 app and used the color '#000000b0' as a background.

Problem :

  • this was working perfectly on desktop but was not coming up on my iPhone.


Wondering to see if anyone else saw this behavior?
Any solutions (other than using rgba for color)?

check a sample on https://www.akberiqbal.com/colors.htm ... the hexadecimal color code with transparency dissappears. I am using iOS 9.3.2 - will check on newer iPhones too.

Wanted to document this case to help someone else.

Thank You.

enter image description here

Solution

  • As per caniuse.com/#search=rgba - although the document is draft ( drafts.csswg.org/css-color/#hex-notation )... the reason that an 8digit hexadecimal color code is not visible on any browser on my iphone is because of my iOS being older than 10.3;

    The 8-digit hexadecimal color code (with transparency) just disappears on version older than 10.3

    rgba would be the way to go because we still have a lot of older devices with old iOS version