What could be the reason for the "A problem repeatedly occurred on..." message appearing when trying to open a recently published website on certain iPhones (iPhone 11 pro and iPhone 12)?
TL;DR
- Test the issue specifically in Safari on affected iOS devices to confirm browser-specific crashes.
- Remove or simplify custom code, complex animations, third-party scripts, and unsupported CSS features.
- Validate fonts and links, clear browser cache, republish the site, and use standard meta tags to ensure compatibility.
The "A problem repeatedly occurred on..." error message on Safari usually indicates a crashing or rendering issue caused by incompatible or problematic code on the website. On iPhones like the 11 Pro and 12, this often stems from specific advanced CSS or JavaScript issues. Here's how to diagnose and fix it:
1. Identify Browser-Specific Crashes
- The message is typically from Safari on iOS, not Chrome or other browsers.
- Test in Safari specifically, and try other devices and iOS versions to confirm it's isolated to certain models.
2. Check for Problematic Webflow Components or Custom Code
- Custom Code (such as scripts embedded in the
<head>or<body>tags) may be clashing with Safari’s rendering engine. - Avoid using non-standard or poorly supported features, such as:
backdrop-filterwithout fallbacksposition: stickynested inside overflow elements- WebGL or interactive canvas elements
- Complex
overflow: scroll+transformcombinations
3. Disable or Isolate Third-Party Scripts
- Remove or disable any third-party tracking, animations, or embeds (e.g., live chat, custom analytics) and re-test on affected devices.
- If using Lottie animations, test removing them temporarily—some complex Lottie files crash Safari on older iOS versions.
4. Minimize Animation Complexity
- Excessive or conflicting Webflow interactions (IX2) can overload the mobile browser. Try simplifying or disabling scroll-based animations on mobile breakpoints.
5. Validate All Custom Fonts and Links
- Improperly loaded fonts or asset links (e.g., Google Fonts over HTTP or broken files) may also cause crashes.
- Use Chrome DevTools → Lighthouse or Safari’s Web Inspector to view console errors.
6. Regenerate and Republish the Site
- Sometimes Webflow’s published assets can become corrupted. Try:
- Making a minor change
- Re-publishing the site
- Clearing browser cache on the device and reopening the site
7. Use Safe Default Meta Tags
- Ensure your site includes standard meta configurations:
- viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - Avoid deprecated or experimental meta tags unless needed
Summary
The error is usually caused by custom code, complex animations, or unsupported CSS features on Safari for specific iPhones. Simplify interactions, disable external scripts, validate assets, and republish. Debug using Safari’s Web Inspector to isolate the cause on affected devices.