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

Question

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.

the browser can interpret group of 3, for instance instead of #000000 you can write #000 and it will be black in both examples — Torjescu Sergiu, Aug 28 '18 at 11:04
@Alqbal This demo works for me in iOS Safari: http://jsfiddle.net/dskj3v54/7/. Please could you create a [MCVE] — Turnip, Aug 28 '18 at 11:07
Should be supported from iOS 10 on, according to https://caniuse.com/#search=rgba — misorude, Aug 28 '18 at 11:18
@Turnip sample on: https://www.akberiqbal.com/colors.htm - Also updated the question — Akber Iqbal, Aug 28 '18 at 11:30
@AIqbal to small for the result view either? https://jsfiddle.net/dskj3v54/7/embedded/result/ — misorude, Aug 28 '18 at 11:46
@misroude blank yellow screen, both squares on top are invisible — Akber Iqbal, Aug 28 '18 at 11:55
I am on iOS 11.4.1. Are you sure this isn't a caching issue? Does the JSFiddle work for you? https://jsfiddle.net/dskj3v54/7/embedded/result/ — Turnip, Aug 28 '18 at 11:57
As per https://caniuse.com/#search=rgba - although the document is draft ( https://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; — Akber Iqbal, Aug 28 '18 at 12:00
@Turnip not a caching issue... for the jsfilddle shared by misroude, i saw a blank yellow screen, both squares on top are invisible on the iPhone — Akber Iqbal, Aug 28 '18 at 12:07

score 0 · Accepted Answer · answered Aug 29 '18 at 15:09

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

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

1 Answers1