CSS hsl(), abnormal colors displayed in safari

HSL cylinder

Recently, I have received a report from user that abnormal color displayed in safari. Then I checked in my safari and found color displayed as expected. After comparing with user’s system information, found that he uses MacOS v15.0.1 and iPadOS v18.0.1

Mine is MacOS v14. Okay…

Upgrading Finished! Now I can get exact the same result as user reported, shown below. L.H.S. is Chrome, R.H.S. is Safari (MacOS v15.0.1)

Chrome VS Safari

Why?

The first thing came into my mind is CSS calc()

Font color is calculated dynamically by using its container’s background color. Perhaps the formula is wrong or read wrong CSS variable. Then I spent some time to investigate. Unfortunately, there is no progress. Both formula and CSS variable are correct. Emm…..

CSS variable is correct

What about compatibility?

hsl() has been supported since v3 for both desktop and mobile OS.

https://caniuse.com/mdn-css_types_color_hsl

What else could be? MacOS v14 works but not v15.0.1

I decide to simplify the issue. Instead of using CSS calc(), let JavaScript calculate the result and assign to CSS variables.

hsl() without calc()

🎉 It works! Problem is solved.

Wait! We still don’t know the root cause. It is more like bypassing the problem, need to step further. The solution above makes user happy and buy us sometime to dive deeper

Let us review the definition of cals() and CSS variable.

https://www.w3.org/TR/css-values/#funcdef-calc

https://www.w3.org/TR/css-values/#mixed-percentages

Spark in brain 🎆. Let me highlight

……, which represents the result of evaluating the expression using standard operator precedence rules.

On the other hand, the second and third arguments of the hsl() function can only be expressed as <percentage>s.

The answer is calc() doesn’t return result in percentage.

According to the definition, the second arguments calc(var(--color-s) * 100%) returns 100 when --color-s: 100; , but not 100%

I guess this version safari changed its fault tolerance mechanism. Will see in next upgrade

Another interesting thing is if I modify hsl() formula a little bit, it works as expected in MacOS v15.0.1

color: hsl(var(--color-h), calc(var(--color-s) * 1%), calc((max(0, min(100 / (60 - var(--color-l)), 1)) + 0.33) * 100 * 1%));

The point is changing 100% to 1% or 100 * 1%

It seems that 1% appends % to the numeric values