Safari中input假性失效主因是样式或层级干扰，非不支持：number需防焦点拦截，优先type="tel"；range卡顿应换自定义滑块；placeholder偏移源于line-height解析差异；聚焦后内容不可见需调z-index、禁用transform，并确保可聚焦上下文。
直接结论：Safari 对 input 类型的支持问题，90% 不是“不支持”，而是原生样式、事件拦截或渲染层级干扰导致的假性失效；优先用 CSS 降级兜底，而非改 type 或上 polyfill。
为什么 type="number" 在 iOS Safari 里输不了数字
不是 Safari 不识别 type="number"，而是它会强制调起数字键盘，但一旦页面有 user-select: none、pointer-events: none 或父容器 overflow: hidden，焦点就无法真正落在输入框内——用户看到光标闪，却打不出字。
- 最稳妥的降级是改用
type="tel"：能唤起数字键盘，又不触发 Safari 对number的校验和滚动行为 - 千万别用
type="text"+ 正则过滤，iOS 下软键盘类型不可控，体验断层 - 如果必须保留
number，务必加-webkit-appearance: none并显式设置z-index: 100和position: relative
type="range" 拖动卡顿或无响应
iOS Safari 渲染 input[type="range"] 是 CPU 密集型操作，尤其嵌套在 modal、bottom-sheet 等动态组件中时，帧率骤降甚至失灵。这不是 bug，是 WebKit 对该控件的底层实现限制。
- 优先替换为自定义滑块（用
div+touchmove实现），避开原生 range - 若用第三方库（如
react-spring-bottom-sheet），确认其是否对 range 做了透传处理；实测react-modal-sheet兼容性更好 - 避免在
range上绑定高频率回调（如实时计算并更新 DOM），用useCallback缓存 handler，且只在change事件触发后更新，而非input
placeholder 文字看不见或位置偏移
根本原因是 Safari 对 line-height 和 padding 的解析与 Chrome/Firefox 不一致，尤其当 input 高度由 height 定义时，文字常被截断或贴顶。
- 放弃
height+line-height组合控制高度，统一用padding-top+padding-bottom+font-size -
::placeholder必须写全前缀：::-webkit-input-placeholder、::-moz-placeholder、:-ms-input-placeholder，且加opacity: 1 - 如果 placeholder 还是偏上，检查是否父容器有
transform或will-change，这些会干扰 Safari 的行内布局计算
聚焦后键盘弹出但内容不可见
典型现象：点击 input，键盘弹起，光标闪烁，但输入文字不显示，或文字出现在视口外——本质是 Safari 在软键盘唤起时未正确重绘输入框的可视区域，尤其在 position: fixed 或 transform 容器内。
- 给
input加position: relative和足够高的z-index（至少 999） - 禁用父级的
transform: translateZ(0)或will-change: transform，这两者在 iOS Safari 中会破坏输入框的渲染上下文 - 必要时在
focus事件里手动触发一次scrollIntoView({ behavior: 'smooth' })，但仅限于非 fixed 定位的 input
最易被忽略的一点：Safari 的 input 行为高度依赖是否触发了「可聚焦上下文」——哪怕只是加了个空的 tabindex="0"，有时就能让原本失灵的 input 恢复响应。别急着写 JS 修复，先查 DOM 结构和样式继承链。
