Trig function sometimes requires calc() wrapper to work

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[Jane Ori]

I am unsure of why or what causes this to happen, but I have a reduced test case where calc() must be wrapped around a tan() call to work in Safari

https://codepen.io/propjockey/pen/Jjwwwmo?editors=1100

The screen size will be shown in the preview, though it only shows 0 x 0 in Safari (this works in Chrome)

If you replace lines 10 and 11 of the css panel with the same code wrapped in calc():

```
  --px-width: calc(tan(atan2(var(--100vw), 1px)));
  --px-height: calc(tan(atan2(var(--100vh), 1px)));
```

then the values will begin working as expected.

No matter what values are passed into atan2() on lines 10 and 11, whether it has units or not, the tan() result is always 0 until it's wrapped in calc

Thank you for your time!
// Jane

[Jane Ori]

Here is a better reduction of the test case

https://codepen.io/propjockey/pen/rNoRayv/ccd8e39e0c5cf9c71007a76c643ef40c?editors=0100

[Ahmad Saleem]

(In reply to Jane Ori from comment #1)
> Here is a better reduction of the test case
> 
> https://codepen.io/propjockey/pen/rNoRayv/
> ccd8e39e0c5cf9c71007a76c643ef40c?editors=0100

It works in Safari Technology Preview 180. So it is already fixed upstream and both show '100 100' rather than '0 100' in Safari 17.

Marking this as 'RESOLVED CONFIGURATION CHANGED'.

Appreciate if someone can mark and add relevant commit for reference.