Style binding doesn't account for -webkit prefixes

[kbutlin-Intouch]

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

I've noticed that Angular's style binding doesn't seem to populate the comparable -webkit features in the way I expected. For example, I had the following line:

<div [style.mask-image]="'url(' + button.iconURL + ')'"></div>

This works fine and applies the mask correctly in some cases, but on browsers which would use -webkit-mask-image instead of mask-image, the field is instead left unpopulated. I tried to get around this by adding [style.webkit-mask-image]="'url(' + button.iconURL + ')'", but as far as I can tell it doesn't exist.

I ultimately had to get around this by using the following:

<div style="mask-image: url('{{ button.iconURL }}'); -webkit-mask-image: url('{{ button.iconURL }}');"></div>

While this works in an instance like this one, where the line is inside an *ngFor, this quickly seems to become more unwieldly when the used variable is dictated by something like a Boolean. For example, this:

<div [style.mask-image]="ribbonPinned ? 'url(../../../../assets/ui-element-unpin.svg)' : 'url(../../../../assets/ui-element-pin.svg)'"></div>

Becomes:

<div style="{{ ribbonPinned ? 'mask-image: url(../../../../assets/ui-element-unpin.svg); -webkit-mask-image: url(../../../../assets/ui-element-unpin.svg);' : 'mask-image: url(../../../../assets/ui-element-pin.svg); -webkit-mask-image: url(../../../../assets/ui-element-pin.svg);' }}"></div>

This does provide the functionality I need but feels like a huge pain in the arse for something which should be relatively simple. VS Code also flags it as an empty ruleset which makes it feel worse.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 16.1.3
Node: 18.16.1
Package Manager: npm 9.5.1
OS: win32 x64

Angular: 16.1.3
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1601.3
@angular-devkit/build-angular   16.1.3
@angular-devkit/core            16.1.3
@angular-devkit/schematics      16.1.3
@angular/http                   7.2.16
@schematics/angular             16.1.3
rxjs                            6.6.7
typescript                      4.9.5

Anything else?

No response

[dylhunn]

n.b. this could also be considered a compiler feature request. It would be easy to make the compiler also populate the corresponding -webkit binding.