`transform-origin` issue when zooming in/out in Safari

[joao-m-santos]

Problem description

When zooming in/out in Safari, the transform-origin behavior breaks. This is a long-time existing problem.

Related links:

• https://bugs.webkit.org/show_bug.cgi?id=124862
• https://bugs.webkit.org/show_bug.cgi?id=133150

This breaks the bar charts that have the option withTransition: true (default value) - e.g.:

Safari 17.5 - Zoomed out by 1 step

Reproduction URL

No response

Reproduction steps

1. Open any Lume bar chart in a Safari browser
2. Zoom in/out ( CMD++ / CMD+-)

Expected behavior

The bars are positioned the same, regardless of browser scale.

Screenshots

No response

Logs

No response

Browsers

Safari

Packages

• [X] Vue 2 (@adyen/lume)
• [X] Vue 3 (@adyen/lume-vue3)

Version(s)

No response

OS

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Make sure this is a Lume issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• [X] The provided reproduction is a minimal reproducible example of the bug.