Safari浏览器中textarea调整大小手柄在内边距超过11px时失效问题咨询

这确实是Safari浏览器的已知兼容性bug，完全不是你的代码实现有疏漏~

问题根源 #

Safari对textarea的resize拖拽手柄定位逻辑存在缺陷：当textarea的内边距（padding）超过某个临界值（你发现的11px就是这个阈值）时，浏览器会错误计算手柄的可点击区域，导致手柄被“覆盖”在textarea的内边距区域下方，无法被鼠标触发交互。

实用解决方案 #

如果需要保留较大内边距同时让resize功能正常工作，推荐两种靠谱的规避方法：

• 方法一：用外层容器模拟内边距
  把textarea嵌套进一个div容器，给容器设置你需要的padding，textarea本身设padding: 0，同时把原textarea的边框、背景等样式移到容器上，保证视觉效果一致：

  .textarea-container {
    padding: 11px 16px;
    border: 1px solid #ccc;
    border-radius: 4px; /* 如果需要圆角的话 */
  }
  .textarea-container textarea {
    padding: 0;
    border: none;
    width: 100%;
    height: 100%;
    resize: both;
    outline: none; /* 可选，去掉聚焦时的默认轮廓 */
    background: transparent;
  }
  

  对应HTML结构：

  <div class="textarea-container">
    <textarea>Stuff goes here. Does my drag handle work?</textarea>
  </div>
  

• 方法二：用伪元素做手柄代理
  给textarea添加一个透明的伪元素，覆盖在原本手柄的位置，作为可点击的交互区域，不过这种方法需要精确计算位置，适合对样式控制要求高的场景：

  textarea {
    padding: 11px 16px;
    position: relative;
    resize: both;
  }
  textarea::after {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    background: transparent;
    cursor: nwse-resize;
    z-index: 1;
  }
  

  注意：部分旧版Safari可能不支持textarea的伪元素，使用前建议测试验证。

额外说明 #

这个bug在Safari的多个版本中都存在，目前官方还没有推出修复方案，所以只能通过上述替代方法来规避。如果你的项目需要兼容Safari，优先推荐第一种外层容器的方案，稳定性和兼容性都更有保障。

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