移动端网站在iOS 11及以上版本无法正常运行问题咨询

阿华AIGC实验室

2026-5-27

Troubleshooting iOS 11+ Mobile Site Crash & Blank Screen Issue

Hey Alina, let's break down why your site is crashing on iOS 11+ iPhones while working fine on older versions. The issue likely stems from either your nested @supports logic or conflicting CSS properties that trigger a rendering bug in newer iOS WebKit.

Key Observations from Your CSS Code

Looking at your provided snippet, the nested @supports conditions are a red flag:

@media only screen and (max-width: 768px) { 
  @supports (-webkit-marquee-repetition:infinite) and (object-fit:fill) { 
    @supports (-webkit-overflow-scrolling: touch) { 
      /* body styles */
    }
  }
}

The -webkit-marquee-repetition property is a legacy feature that was deprecated in newer iOS Safari versions (including iOS 11+). Since older iOS versions support this property, your styles load correctly there—but iOS 11+ fails the first @supports check, so none of your iPhone-specific body styles are applied. This missing styling is almost certainly causing the layout collapse and blank screen.

Fixes to Try

1. Simplify the `@supports` Condition

Remove the redundant legacy property check and focus on the iOS-specific feature that matters: -webkit-overflow-scrolling: touch. This ensures your styles target all iOS Safari versions (including 11+) without relying on deprecated properties.

2. Adjust Body Styles for Modern iOS

Fixed heights (height: 1700px) and vw units can cause layout issues on newer iOS devices due to improved viewport handling. Replace these with more flexible values:

Here's a revised version of your CSS:

@media only screen and (max-width: 768px) {
  @supports (-webkit-overflow-scrolling: touch) {
    body {
      overflow-y: auto; /* Use auto instead of scroll for dynamic content */
      min-height: 100vh; /* Adapt to any screen height */
      overflow-x: hidden;
      position: relative;
      background-image: radial-gradient(circle at center, #0c505f, #053540);
      color: #0c505f;
      width: 95%; /* Replace vw with % for more consistent sizing */
      margin: 0 auto; /* Center content with margins instead of vw */
    }
  }
}

3. Verify Your Viewport Meta Tag

Ensure your site includes a proper viewport tag in the <head>—iOS 11+ enforces stricter viewport rules, and missing this can lead to layout crashes:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

4. Test with Safari Developer Tools

Connect your iOS 11+ iPhone to a Mac, open Safari's Web Inspector, and check:

The Console for any CSS parsing errors
The Elements tab to confirm your body styles are being applied
The Rendering tab to debug layout issues

Final Notes

If the revised CSS still doesn't fix the crash, try removing properties one by one (starting with background-image or position: relative) to isolate which property is triggering the bug. Newer WebKit versions can be sensitive to certain property combinations that worked in older iOS versions.

内容的提问来源于stack exchange，提问作者Alina Bayron