Cannot use `background-position`

[miroslavstastny]

trafficstars

Griffel does not support background-position. That is expected as it is a CSS shorthand. We are supposed to use background-position-x and background-position-y longhands instead.

Shorthand works

The problem is with

background-position: center bottom 10px;

It works consistently across browsers:

Chrome 104	Firefox 104	Safari 15.6.1

Codesandbox: https://codesandbox.io/s/empty-wood-1m917y

Longhands broken in Chrome 104

Once we expand that to longhands:

background-position-x: center;
background-position-y: bottom 10px;

The result is still the same in Firefox and Safari but breaks in Chrome:

Chrome 104	Firefox 104	Safari 15.6.1

Codesandbox: https://codesandbox.io/s/vibrant-heyrovsky-7ezu6h

[miroslavstastny]

Chrome shows an error in devtools:

[nadnad]

Chromium issue for the longhand bug: https://bugs.chromium.org/p/chromium/issues/detail?id=610627&q=background-position-y&can=2

[layershifter]

@miroslavstastny backgroundPosition can be used now as we support CSS shorthands now, see #531.