Safari浏览器中writing-mode属性兼容异常问题的解决方法问询

云原生阿岚

2026-6-30

问题解决：Safari中writing-mode与transform组合失效的处理

问题分析

在Chrome和Firefox中，writing-mode: vertical-rl配合transform: rotate(180deg)可实现预期的竖排文本效果，但iPhone 11的Safari里文本会倒置，添加-webkit-writing-mode也无效。核心需求是必须保留writing-mode来自动调整元素width，不能仅用transform替代。

可行解决方案

方案1：嵌套元素分离布局与文本方向

把布局控制（writing-mode）和文本方向调整拆分到不同元素，确保外层容器负责适配竖排内容的width，内层处理文本方向：

<div class="vertical-container">
  <p>Guest</p>
</div>

.vertical-container {
  writing-mode: vertical-rl;
  /* 外层控制布局，width自动适配竖排内容 */
}

.vertical-container p {
  display: inline-block;
  transform: rotate(180deg);
}

/* 针对Safari移除rotate，用text-orientation保证正向显示 */
@supports (-webkit-touch-callout: none) {
  .vertical-container p {
    transform: none;
    text-orientation: upright;
  }
}

方案2：用`text-orientation`替代`transform`调整方向

通过纯CSS属性组合控制文本方向，避免transform带来的浏览器差异：

p {
  writing-mode: vertical-rl;
  text-orientation: upright;
  direction: rtl;
}

该方案靠text-orientation: upright确保文本正向，direction: rtl调整竖排阅读顺序，无需额外transform，同时保留writing-mode对width的自动调整能力。

方案3：针对Safari替换`transform`类型

将rotate(180deg)换成scaleY(-1)，仅翻转垂直方向适配Safari渲染逻辑：

p {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* Safari下用scaleY替代rotate */
@supports (-webkit-touch-callout: none) {
  p {
    transform: scaleY(-1);
  }
}