Ionic4 :: Safari issues with var(--......-rgb) [-rgb vars]

Ionic Framework
1

Just a heads up in case anyone was wondering why Safari renders CSS in many places vastly different to Chrome:

This does not work:

border: 19px solid rgba(var(--ion-color-primary-rgb), 0.9);

This however does:

--workaround-border-color: 19px solid rgba(var(--ion-color-primary-rgb), 0.9);
border: var(--workaround-border-color);

Bottom line, currently Safari (Mac and iOS/cordova) doesn’t render *-rgb values properly for

  • border
  • box-shadow

and probably more!

FYI;