iOS端position: sticky结合writing-mode: vertical-rl内容间歇性消失求助

问题描述 #

在iOS设备上，同时使用position: sticky与writing-mode: vertical-rl属性时，带有position: sticky的元素内的内容会在页面加载、垂直或水平滚动时偶尔消失，之后又重新出现。

代码示例 #

HTML #

<div class="container">
    <div class="group">
        <h2 class="sticky">Fruits</h2>
        <ul>
            <li>Apple harvest has begun</li>
            <li>A new variety of grapes has been introduced</li>
            <li>Orange imports are increasing</li>
            <li>The nutritional value of bananas is being reassessed</li>
            <li>The mango season has arrived</li>
            <li>Cherry prices are rising</li>
            <li>The health benefits of pineapples</li>
            <li>How to chill watermelon</li>
            <li>New melon recipes</li>
            <li>Strawberry storage methods</li>
        </ul>
    </div>
    <div class="group">
        <h2 class="sticky">Vegetables</h2>
        <ul>
            <li>Tomato cultivation techniques are evolving</li>
            <li>A new variety of cucumbers is gaining attention</li>
            <li>The health benefits of cabbage are being reassessed</li>
            <li>How to keep lettuce fresh</li>
            <li>The nutritional value of carrots has improved</li>
            <li>Broccoli cooking methods</li>
            <li>Spinach storage methods</li>
            <li>A bountiful potato harvest</li>
            <li>Eggplant popularity is surging</li>
            <li>Bell pepper cooking ideas</li>
        </ul>
    </div>
    <div class="group">
        <h2 class="sticky">Meat</h2>
        <ul>
            <li>Beef consumption is increasing</li>
            <li>New cooking methods for pork</li>
            <li>Chicken prices are stable</li>
            <li>Lamb popularity is rising</li>
            <li>The health impacts of bacon</li>
            <li>Ham storage methods</li>
            <li>New sausage recipes</li>
            <li>The nutritional value of duck meat</li>
            <li>Turkey cooking methods</li>
            <li>The supply of venison is increasing</li>
        </ul>
    </div>
    <div class="group">
        <h2 class="sticky">Fish</h2>
        <ul>
            <li>Salmon farming techniques are improving</li>
            <li>Tuna catch volumes are increasing</li>
            <li>Cod cooking methods are gaining attention</li>
            <li>Squid consumption is surging</li>
            <li>The health benefits of shrimp</li>
            <li>Crab market prices are stable</li>
            <li>Mackerel storage methods</li>
            <li>The high nutritional value of flounder</li>
            <li>New mackerel cooking ideas</li>
            <li>Sardine catch volumes are increasing</li>
        </ul>
    </div>
</div>

CSS #

.container {
    display: flex;
    flex-direction: row-reverse;
    overflow-x: auto;
}
.group {
    writing-mode: vertical-rl;
}
.sticky {
    position: sticky;
    right: 0;
}

/* Additional styles for visibility */
.sticky {
    background: #3ea4b8;
    color: white;
    font-size: 1.5em;
}
li {
    padding: 1em;
}

已尝试的解决方案 #

• 为.sticky添加以下CSS属性：

-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
will-change: transform;

• 为html和body添加以下CSS属性：

overscroll-behavior: none;

可行解决方法与替代方案 #

1. 为sticky元素指定明确尺寸 #

iOS渲染引擎在垂直书写模式下可能无法正确计算sticky元素的尺寸，导致内容被裁剪。添加以下样式：

.sticky {
  width: fit-content;
  height: fit-content;
  white-space: nowrap;
}

2. 用transform模拟垂直排版替代writing-mode #

避免writing-mode: vertical-rl与sticky的冲突，通过旋转和flex布局实现垂直文字效果：

.group {
  display: flex;
  flex-direction: column;
}
.sticky {
  position: sticky;
  right: 0;
  transform: rotate(180deg);
  writing-mode: horizontal-tb;
  text-align: center;
}

3. 滚动时强制触发重绘 #

通过JavaScript监听滚动事件，强制sticky元素重绘，解决间歇性消失问题：

const stickyElements = document.querySelectorAll('.sticky');
window.addEventListener('scroll', () => {
  stickyElements.forEach(el => {
    el.style.display = 'none';
    void el.offsetHeight; // 触发重绘
    el.style.display = '';
  });
}, { passive: true });

4. 为容器开启硬件加速 #

给容器添加transform: translateZ(0)，强制iOS使用硬件加速渲染，改善渲染稳定性：

.container {
  display: flex;
  flex-direction: row-reverse;
  overflow-x: auto;
  transform: translateZ(0);
}

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