Secure Web Pay: Fix for reCAPTCHA Not Loading in Safari : Support Services

Browser: Safari version 12.1.1
Operating System: macOS
Platform: SWP-Checkout embedded within an iframe

Symptoms

When attempting to complete a reCAPTCHA challenge in Safari 12.1.1—while SWP-Checkout is embedded inside an iframe—the reCAPTCHA image grid fails to load correctly. Instead of showing the image selection grid, a blank white panel is displayed, preventing the user from completing the verification process.

Root Cause

This issue is caused by a rendering bug in Safari 12.1.1 related to how it handles content within nested iframes, particularly when the iframe exceeds 512 pixels in height or width. Safari’s rendering engine in version 12.1.1 had known issues with how it repainted certain elements—such as reCAPTCHA—in this context.

Resolution

The issue is resolved in Safari version 12.1.2. Users encountering this problem should be advised to update their browser to Safari 12.1.2 or later to restore reCAPTCHA functionality within iframes.

✅ Recommended Action:

Ask affected users to:

Update Safari to version 12.1.2 or newer.
Clear cache and reload the page after the update.

Technical Explanation

Safari 12.1.1 had a bug affecting how it repaints visual elements inside nested iframes, particularly when those iframes exceeded 512 pixels in size. This repaint issue caused reCAPTCHA to fail when attempting to display its image challenge, resulting in a white, non-interactive panel.

This was acknowledged and fixed by Apple in Safari 12.1.2, where they addressed the repaint behavior in nested iframes, restoring full compatibility with Google’s reCAPTCHA service.

Workarounds (If Update Is Not Immediately Possible)

If users cannot upgrade Safari immediately, here are potential temporary workarounds:

1. Reduce the IFrame Size

Set the iframe containing the SWP-Checkout to 512 pixels or less in height and width. This may help bypass the rendering issue:

html
CopyEdit
<iframe src="your-swp-checkout-url" width="512" height="512"></iframe>

2. Inject Style to Improve Rendering

Adding the following CSS to the <head> section inside the iframe may improve reCAPTCHA visibility:

html
CopyEdit
<style type="text/css">  .rc-image-tile-wrapper {    transition: auto !important;  }
</style>

Note: This is a workaround and may not work in all scenarios or future Safari versions.

Important Considerations

Safari has a history of intermittent issues with reCAPTCHA when used within iframes. These issues often reappear with new Safari updates, particularly involving:

Iframe size constraints
Security policies
Rendering changes

If users report similar issues after Safari updates, revisit these workarounds or search for the latest known compatibility notes from Apple or Google.

-------------------

Secure Web Pay: Fix for reCAPTCHA Not Loading in Safari