bug(slide-toggle): handle is not visible in Safari v18.3

[merelrietbergen]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

In Safari v18.2 the slide toggle looks like this

while in Safari v18.3 it looks like this

The handle is not getting colored, except when interacting with it.

Reproduction

Repro link: https://material.angular.io/components/slide-toggle/overview

Apologies that it's not a StackBlitz link, but that site seems to have it's own problems on Safari.

Expected Behavior

The handle of the slide-toggle is colored per the configured theme when not interacting with it.

Actual Behavior

The handle of the slide-toggle is not colored except when interacting with it.

Environment

• Angular: 19.1.5
• CDK/Material: 19.1.3
• Browser(s): Safari 18.3
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[crisbeto]

Interesting, I see the same issue in the docs site, but our local dev app works fine: https://ng-comp-devapp.web.app/slide-toggle. Do you see in your app?

[merelrietbergen]

We see it in our app on some pages, but in other places it's actually fine and I cannot understand the difference between the places where it works and the places it does not 😅 I can confirm your fix works in our app as well. Thanks @crisbeto !