iOS Safari 问题 - 将绝对位置更改为固定时，滚动时元素变得不可见答案

【问题标题】：iOS Safari issue - Element becomes invisible while scrolling when changing position absolute to fixediOS Safari 问题 - 将绝对位置更改为固定时，滚动时元素变得不可见
【发布时间】：2016-09-24 06:47:12
【问题描述】：

我想使用页面上的一个元素作为以下内容的标题，但是当用户滚动到内容时，这个标题元素应该固定在标题处。类似于 iOS 音乐应用中的 ABC 字幕。

请看这里：https://jsfiddle.net/1e7ync4w/

HTML

<div>
  <div class="top">
  Test
  </div>
  <div class="content">
    <div class="scroller">

    </div>

    Test
  </div>
</div>

CSS

.top {
  background-color: yellow;

  height: 300px;
}

.content {
  position: relative;

  height: 600px;

  background-color: green;
}

.scroller {
  position: absolute;

  width: 100%;
  height: 10px;

  top: 0;
  left: 0;

  background-color: blue;
}

.scroller.fixed {
  position: fixed;
}

$(document).ready(function() {
    $(window).on('scroll touchmove', function() {
      $('.scroller').removeClass('fixed');


    var scrollTop = $(window).scrollTop();
    var scrollerOffsetTop = $('.scroller').offset().top;

    if(scrollerOffsetTop <= scrollTop) {
                $('.scroller').addClass('fixed');
    }
});
  });

问题在于，iOS Safari 似乎存在一个错误，即在滚动时将元素更改为固定（通过 JavaScript）。一旦用户滚动到内容中，title-element 就会变得不可见，但会在手指从显示器上松开后显示出来（scroll-end）。

我只在 iOS 9.3.2 safari 上测试过这个问题，但我认为这个问题比较老。

【问题讨论】：

3 年后，这仍然是一个问题......谢谢，@Luca Nate Mahler

标签： ios scroll safari positioning

【解决方案1】：

我找到了解决这个问题的方法。这有点骇人听闻，但我为这个 iOS 错误找到了唯一的解决方法。

需要“激活”浏览器的 GPU 才能更新相应的元素。这可以通过JS设置transform: translate样式来实现，只要定位跳转到固定。

示例代码如下所示：

$(document).ready(function () {
    $(window).on('scroll touchmove', function () {
        $('.scroller').removeClass('fixed');


        var scrollTop = $(window).scrollTop();
        var scrollerOffsetTop = $('.scroller').offset().top;

        if (scrollerOffsetTop <= scrollTop) {
            $('.scroller').addClass('fixed').css({
                'transform': 'translate3d(0px,0px,0px)',
                '-moz-transform': 'translate3d(0px,0px,0px)',
                '-ms-transform': 'translate3d(0px,0px,0px)',
                '-o-transform': 'translate3d(0px,0px,0px)',
                '-webkit-transform': 'translate3d(0px,0px,0px)'
            });
        }
    });
});

【讨论】：