iPhone 12/13 mini模拟器ScrollView内嵌ZStack显示异常咨询

问题结论 #

该问题是Xcode 13.0 (13A233) 版本iPhone 12、13 mini模拟器的已知渲染bug，同时你代码中的不规范写法放大了异常表现，二者共同导致了显示问题。

原因说明 #

• Xcode 13.0版本模拟器对iPhone 12、13 mini这类非标准点分辨率的机型，存在ScrollView嵌套ZStack时的离屏渲染计算错误，会触发ZStack层级错乱、内容裁剪缺失的问题，该问题在Xcode 13.1及后续版本已经修复，且该问题仅出现在模拟器，实机运行不会触发。
• 你代码中直接使用UIScreen.main.bounds硬编码计算视图宽度，没有适配ScrollView的安全区域和布局上下文，在mini系列模拟器的特殊分辨率下，布局溢出的问题被模拟器bug放大，最终出现异常。

优化方案 #

1. 替换UIScreen.main.bounds的硬编码宽度计算逻辑，改用GeometryReader读取父视图实际可用尺寸来设置子视图宽度，避免布局溢出，修改后代码参考：

ScrollView{
    GeometryReader { proxy in
        ZStack(alignment:.topLeading){
            HStack{
                Text("k")
                    .font(.footnote)
                VStack{
                    VStack{
                        HStack{
                            Text("Left")
                                .font(.footnote)
                            Spacer()
                            Text("\(exe.l, specifier: "%.0f")")
                                .font(.footnote)
                        }
                        Slider(value: $exe.l, in: 0...slmax)
                            .accentColor(sliderco)
                    }.frame(width: proxy.size.width / 1.5)
                    VStack{
                        HStack{
                            Text("Right")
                                .font(.footnote)
                            Spacer()
                            Text("\(exe.2, specifier: "%.0f")")
                                .font(.footnote)                                
                        }
                        Slider(value: $exe.2, in: 0...slmax)
                    }.frame(width: proxy.size.width / 1.5)
                }
            }.frame(width: proxy.size.width / 1.2)
            Button(action: {show.toggle()}, label: {
                Image(systemName: "xmark.circle")
                    .resizable()
                    .frame(width: 20, height: 20)
            })
        }
    }
}

2. 升级Xcode到13.1及以上版本，即可彻底修复该模拟器渲染问题。如果暂时不方便升级，你当前用List替代ScrollView的临时方案是可行的，轻微延迟是List自带的cell复用逻辑导致，属于正常现象。
3. 可以直接在对应型号的实机上验证运行效果，该bug仅存在于特定版本模拟器，实机不会出现该异常。

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