iPhone端Safari/Chrome下textarea inset盒阴影不显示问题求助

问题根因 #

iOS上所有浏览器（不管是Safari还是第三方Chrome，内核都是苹果的WebKit）从iOS13开始，给触控场景的表单控件做了专属渲染分支逻辑：

• 没有内部滚动能力的固定尺寸控件（input、select类）会完全遵循开发者写的inset box-shadow规则渲染，所以同页面下这两类元素的阴影不会有问题
• 自带内部文本滚动容器的textarea，会优先加载WebKit内置的原生控件默认视觉，开发者写的inset盒阴影的绘制层级刚好被压在原生渲染层下面，最后就表现为阴影完全不生效
• 桌面端浏览器、哪怕你在桌面浏览器上把窗口缩到iPhone的视口大小，走的都是桌面版WebKit的渲染逻辑，不会触发移动端专属的表单渲染分支，所以根本复现不了这个问题

可直接落地的修复操作 #

• 先做最核心的样式重置，打断WebKit原生样式对textarea的渲染优先级：
  给所有textarea加全局重置规则：

  textarea {
    /* 关键开关：关掉WebKit默认给表单控件套的原生外观 */
    -webkit-appearance: none;
    /* 兼容低版本iOS Safari的前缀写法，避免旧内核识别失败 */
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    /* 写标准属性声明，确保阴影规则被正常解析 */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    /* 明确指定滚动属性，避免内部滚动容器把阴影区域裁掉 */
    overflow: auto;
  }
  

• 排查容易踩的关联样式坑：
  • 移除textarea默认边框的时候别把内边距设成0，至少留10px的内边距，不然文本输入的光标层会直接把inset阴影的绘制区域挡住
  • 如果项目里需要对表单区域做硬件加速优化（解决iOS下输入时的滚动卡顿问题），只需要在textarea的父容器上写transform: translateZ(0)就行，别在textarea元素本身重复加硬件加速规则，两层硬件加速叠加会把阴影直接裁在组件的原生边界外面
  • 验证效果的时候优先用真实的iOS设备测试，旧版本Xcode自带的模拟器本身有渲染bug，很容易出现“模拟器上阴影不生效、实机上正常”或者反过来的误判

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