iOS 15及以上版本WKWebView阿拉伯语下拉弹窗文本镜像问题

问题原因 #

阿拉伯语属于RTL（从右到左）语言，iOS 15及更高版本对WKWebView的RTL适配逻辑做了调整，导致原生下拉弹窗（如网页中<select>标签的下拉选项）的文本被错误镜像反转。

解决方案 #

• 明确设置WKWebView的语言方向偏好
  通过配置WKWebViewConfiguration，直接指定网页的语言和文本方向，避免系统自动推断出错：

  let webConfig = WKWebViewConfiguration()
  // 根据当前应用语言动态配置
  let currentLang = Locale.current.languageCode ?? "en"
  let textDirection = currentLang == "ar" ? "rtl" : "ltr"
  
  webConfig.defaultWebpagePreferences.setValue(currentLang, forKey: "lang")
  webConfig.defaultWebpagePreferences.setValue(textDirection, forKey: "dir")
  
  let webView = WKWebView(frame: view.bounds, configuration: webConfig)
  

• 给网页添加RTL适配CSS（网页可控时）
  如果网页是你的团队开发维护的，在全局CSS中添加针对下拉选项的样式，强制文本方向正确：

  select option {
      direction: rtl;
      unicode-bidi: embed;
  }
  

  该样式会确保阿拉伯语文本按从右到左的顺序显示，同时避免字符镜像反转。

• 禁用自动镜像适配（极端场景）
  若上述方案无效，可尝试关闭WKWebView的私有自动镜像属性（注意：使用私有API存在App Store审核风险）：

  webView.setValue(false, forKey: "_allowsAutomaticMirroring")
  

注意事项 #

• 测试时需确保应用完全切换到阿拉伯语环境，包括系统语言设置和应用内语言切换逻辑
• iOS 15以下版本无此问题，可通过版本判断仅在iOS 15+应用上述方案

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