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

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