CSS bug using rgb/rgba for Safari 10/11 in some properties

[TSP]

@Rikki @Ehren

Safari 10 and 11 apparently have an issue with the use of rgb() / rgba() in combination with --css-variables within certain CSS properties like border and box-shadow. I found one specific bug in your default theme that you can fix, other than that I just want to make you aware of this, as I had to spend quite a lot of time debugging this myself. 

After an upgrade from 4.4 I got a number of complaints about how there was now a grey circle covering the reaction button and the number of likes. People reported having the issue on desktop, mobile and tablet. Initially I was unable to reproduce and started to ask for more details. One of the users provided me with a user agent string which led me to reproduce the issue and discovering another one.

This image displays two of the issues I found in our theme:

 

This image displays how it looked in Safari 9(!), Safari 12+ and other browsers:

How to reproduce issue 1 on a community: 

You need to be logged in with a member account that's able to give reactions, and: 

The reaction setup: In my case only the standard like-reaction is enabled, all other reactions disabled. We use the upvote-image for the like-reaction. Reaction display is set to Overall reaction value.
Reproduced with: Browserstack -> Mac -> High Sierra -> Safari 11.1 (or other environments with Safari 10 or 11)

Please note: only issue 1 can be reproduced in the default theme, but I'm also mentioning my second issue just to provide an additional example. 

Cause/solution for Issue 1 / Bug in default theme) Grey circle covering like button and reaction value

This is caused by the following CSS rule in applications/core/dev/css/global/framework/engagement.css

a.ipsReact_reaction:after {
    position: absolute;
    top: 50%;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    content: '';
    display: block;
    opacity: 1;
    pointer-events: none;
    box-shadow: inset 0 0 0 35px rgba( var(--theme-text_color), 0 );
}

More specifically the issue is with the box-shadow line at the bottom. Unless I'm missing something, this rule is the equivalent of:

box-shadow: inset 0 0 0 35px transparent;

Changing the value of box-shadow to "inset 0 0 0 35px transparent" at least fixes the issue. But I guess this might affect the animation styles you have further below in the same stylesheet. I don't know what a better solution would be, but I at least think you should make sure that the reaction button and reaction value are available in Safari 10 and 11, which they are not currently. 

Cause/solution for Issue 2) Black color instead of lighter border color around posts

So the second issue was caused by custom CSS from me, but I'm including it since it highlights the rgb/rgba problem with another CSS property as well. 

My CSS-rule was: 

article.ipsComment {
    border: 1px solid rgb(var(--theme-ehm_grey2));
    border-radius: 10px;
}

The solution here was to instead use border-style and border-width and then add:

border-color: rgb(var(--theme-ehm_grey2));

So rgb() + --css-var worked within the value of the border-color property, but not within the border property.

Note that if you do not use a variable within rgb for the border-property, then it would also use the correct color: border: 1px solid rgb(235,235,235); 
Meaning it's the combination of rgb/rgba-function and --css-variables that is causing the issue. Not the rgb-function on it's own

In summary / other findings / questions:

1) Safari 10 and 11 apparently have an issue with the use of rgb() / rgba() in combination with --css-variables within certain properties. In most cases it probably doesn't cause too much trouble, but I think you should at least fix the reaction styling issue and also just be aware of this issue. 

2) I personally found it very weird this issue is not in Safari 9. It seems it worked as it should Safari 9, then they broke it for Safari 10&11, before it was fixed again for Safari 12 and newer. Unless you have some kind of compatibility CSS rules or javascript that kicks in for Safari 9 but not 10/11?

3) I did a quick search on google about this and found a note about this from 2018 in another software project: https://github.com/ionic-team/ionic-framework/issues/16123

They gave an alternate way to debug and solve this (which I haven't tested myself): 

Quote

Describe the Bug
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!

 

Edited November 28, 2020 by TSP