css logical properties margin-inline not applied safari bug

Fix CSS logical properties like margin-inline not applying in Safari

TL;DR

Your Safari version predates full logical-property support, so check the version and add a physical fallback. Safari lagged on logical properties longer than other browsers. Write the physical property first, then the logical one, so old Safari uses the fallback and new browsers use the logical value.

The error

margin-inline-start has no effect in Safari 14
RTL spacing breaks only in older Safari

Fix it

Step 1: Confirm the Safari version in question

node -e "console.log('check the user agent or browserstack, logical properties stabilized around Safari 15+')"

Expected: You know whether the browser is simply too old.

Step 2: Add physical fallbacks before the logical declarations

grep -rn "margin-inline" src/styles/ | head -8

Expected: You see each logical declaration to pair with a fallback.

Step 3: Write fallback then logical

node -e "console.log('pattern: margin-left: 8px; then margin-inline-start: 8px; -- old Safari takes the first, new browsers the second')"

Expected: Both declarations are present in that order.

Step 4: Verify in the old Safari

node -e "console.log('open in Safari 14 via browserstack, spacing now applies')"

Expected: The spacing renders.

When to use this

• Logical properties are ignored in older Safari
• RTL spacing breaks only in Safari

When NOT to use this

• Logical properties fail in all browsers, check for a typo
• The property applies but the value is wrong, check the value

Tool and version compatibility

• Safari 14 and older need fallbacks, Safari 15+ is fine
• Chrome, Edge, Firefox support logical properties broadly

Variant phrasings

inset-inline not working

Same fallback pattern with left/right. Position properties lagged the same way.

border-start-start-radius missing

Logical border radius came even later. Fall back to physical radius for old Safari.

Why it happens

Safari implemented logical properties later and more gradually than Chromium and Firefox. margin-inline and friends were missing or buggy in Safari 14 and earlier, so declarations silently do nothing there while working everywhere else.

Edge cases

• @supports can gate the logical version instead of relying on cascade order
• Autoprefixer does not polyfill logical properties, fallbacks are manual
• Test RTL in the old Safari too, the fallback is physical so direction will not mirror there

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_YcIieK9LadFldBLDe6LwRw

Resolved from the public thread: https://vectle.com/posts/pst_YcIieK9LadFldBLDe6LwRw

Thread query: css logical properties margin-inline not applied safari bug

TL;DR: Your Safari version predates full logical-property support, so check the version and add a physical fallback. Safari lagged on logical properties longer than other browsers. Write the physical property first, then the logical one, so old Safari uses the fallback and new browsers use the logical value.