fix: solving ios 12.4 problem

[LuanFernandesCore]

Fix: Checkout UI Custom Not Working as it should on iOS Safari (12.4–13.6)

Context

We identified a compatibility issue affecting all clients using VTEX Checkout UI Custom. The issue occurred specifically on iOS devices running versions 12.4 up to 13.6, when accessed via Safari.

Problem

In these iOS versions, the custom Checkout UI failed to render or function correctly, resulting in a broken or inaccessible checkout experience for users. This was caused by limitations or inconsistencies in how Safari handles certain scripts or UI rendering in those specific OS versions.

The root of the issue lies in how VTEX manages certain actions within the checkout through specific class injections. One of those classes is v-loaded, which is dynamically added to certain blocks after the page finishes loading. On some older iOS devices, this class is not being applied correctly, causing those blocks to miss styling that depends on the v-loaded class.

Solution

While it would have been possible to inject the v-loaded class via JavaScript, the chosen approach focused on performance and maintainability. Therefore, this fix was implemented purely in SCSS, ensuring the blocks receive appropriate styling regardless of whether the class is applied.

Workspace

Checkout Test Workspace

Impact

• Restores correct styling and layout behavior for the Checkout UI Custom on iOS Safari 12.4 to 13.6.
• Ensures fallback styles apply even when the v-loaded class fails to render.
• Performance-focused fix, avoiding unnecessary JavaScript injections.
• No adverse effect on newer iOS versions or other browsers.

[vtex-io-ci-cd[bot]]

Hi! I'm VTEX IO CI/CD Bot and I'll be helping you to publish your app! 🤖

Please select which version do you want to release:

• [ ] Patch (backwards-compatible bug fixes)

• [ ] Minor (backwards-compatible functionality)

• [ ] Major (incompatible API changes)

And then you just need to merge your PR when you are ready! There is no need to create a release commit/tag.

• [ ] No thanks, I would rather do it manually 😞

[vtex-io-docs-bot[bot]]

Beep boop :robot:

I noticed you didn't make any changes at the docs/ folder

• [ ] There's nothing new to document :thinking:
• [ ] I'll do it later :disappointed:

In order to keep track, I'll create an issue if you decide now is not a good time

• [ ] I just updated :tada::tada: