iOS 13.4 下 bounce 存在异常 #978

xiaojundebug · 2020-03-25T03:40:55Z

Version

1.15.2

Reproduction link

http://ustbhuangyi.com/music/#/recommend

Steps to reproduce

快速滑动，当触发bounce时，你会看到 list 大跳一下，请参考你们官方播放器 demo （http://ustbhuangyi.com/music/#/recommend）

What is expected?

正常弹回

What is actually happening?

bounce渲染异常

我本地能复现，并不是官方 demo 个例

xiaojundebug · 2020-03-25T08:21:28Z

今天刚升级的iOS版本就坏了，昨天还好好的

tanlucheng · 2020-04-01T14:24:09Z

今天刚升级的iOS版本就坏了，昨天还好好的

就是iOS 13.4 才会出现的，我现在也遇到了，项目生产环境在用着。急！请问有解决办法吗

theniceangel · 2020-04-01T15:55:05Z

@tanlucheng 是在什么浏览器下面，微信还是safari？

theniceangel · 2020-04-02T05:38:38Z

@xiaojun1994 @tanlucheng 我测试了一下，是在iOS 13.4 && wkwebview 的情况下，会出现这个情况，目前的解决方案就是根据 ua 在实例化 bs 的时候传入关闭 bounce 的配置。

{
   bounce: {
       top: false,
       bottom: false
   }
}

theniceangel · 2020-04-02T06:06:42Z

或者还有另外一种方案，默认采取 raf 作为滚动方式，这样性能可能没有用 css 方案好，配置如下:

{
    useTransition: false
}

theniceangel · 2020-04-02T06:08:55Z

目前 wkwebview 是存在许多bug，我在实际的公司业务中也是遇到很多问题

tanlucheng · 2020-04-02T07:03:01Z

目前选择优雅降级的方式，判断在iOS 13.4版本 设置bounce为false！

…

------------------ 原始邮件 ------------------ 发件人: "JiZhi"<notifications@github.com>; 发送时间: 2020年4月2日(星期四) 下午2:09 收件人: "ustbhuangyi/better-scroll"<better-scroll@noreply.github.com>; 抄送: "谭露成"<759908111@qq.com>; "Mention"<mention@noreply.github.com>; 主题: Re: [ustbhuangyi/better-scroll] iOS 13.4 下 bounce 存在异常 (#978) 目前 wkwebview 是存在许多bug，我在实际的公司业务中也是遇到很多问题 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

jemmy-tang · 2020-04-15T01:07:03Z

先给个大致的思路：
1.禁止回弹效果，但是不能用bounce:false的配置，否则下拉刷新和上拉加载功能没法使用
2.滚动分为手指离开屏幕的滑动和触摸中的滑动；触摸中的滑动不会出发ios13.4下的bug
3.那这里就要解决手指离开屏幕的滑动了，监听scroll事件，判断y值顶部和底部的临界值，超过后用scrollTo归位。这样就不会触发回弹效果了。

jemmy-tang · 2020-04-15T02:59:24Z

  let isTouching = false; //是否正在触摸屏
  let scrollYBottom = 0; //滚动到底部的值
  let isPullingDown = false; //是否在下拉过程中，避免下拉后立刻回弹，保留回弹效果
  let isPullingUp = false; //是否在上拉过程中， 避免上拉后立刻回弹，保留回弹效果

  const ver = navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/);
  //判断ios是否大于13.4
  const isIosVerLgThan1304 = ver && ver.length > 3 && ver[1] >= 13 && ver[2] >= 4; //判断ios是否大于13.4

  const oWrapper = document.getElementById("wrapper");

  const scroll = new BScroll("#wrapper", {});

  if (isIosVerLgThan1304) {
    scroll.on("scroll", (pos) => {
      //根据Y值判断是否下拉结束
      if (pos.y <= 0 && isPullingDown) isPullingDown = false;
      if (pos.y >= scrollYBottom && isPullingUp) isPullingUp = false;

      if (isTouching) return;

      //限制正常滑动过程中scroll顶部回弹
      if (!isPullingDown && pos.y >= 0) {
        scroll.scrollTo(0, 0, 0);
      }

      //限制正常滑动过程中scroll底部回弹
      if (!isPullingUp && scrollYBottom >= pos.y) {
        scroll.scrollYTo(0, scrollYBottom, 0);
      }
    });

    oWrapper.addEventListener("touchstart", () => {
      //每次触摸时重新计算滚动到底部Y值... 解决开启上拉加载后，内容高度会变
      scrollYBottom = scroll.wrapperHeight - scroll.scrollerHeight;
      isTouching = true;
    });
    oWrapper.addEventListener("touchend", () => {
      if (scroll.y > 0) isPullingDown = true; //保持下拉状态
      if (scroll.y < scrollYBottom) isPullingUp = true; //保持上拉状态
      isTouching = false;
    });
  }

上面是从我的react组件中剥离出来的逻辑(简化版)，此段代码没测试过，大致逻辑是这样的。
注：自己封装的react组件中亲测有效，牺牲下13.4下的回弹效果

moahmn · 2020-04-20T06:28:03Z

同事的今天也说了这个问题，也能复现，13.4的ios

Fogwind · 2020-05-15T09:45:38Z

根据@jemmy-tang的思路，整理的我的解决方法：

let bScrollInstance = null;
let loadFinish = false; // 数据是否全部加载完成 当你调用closePullUp()函数时把loadFinish的值修改为true。

init();

function init() {
        bScrollInstance = new BScroll('#wrapper', {
          scrollY: true,
          click: true,
          pullDownRefresh: {
            threshold: 90,
            stop: 30
          },
          pullUpLoad: {
            threshold: 30
          }
        });
        // 当下拉距离达到 threshold 配置的值时触发
        bScrollInstance.on('pullingDown', pullingDownHandler);
        bScrollInstance.on('pullingUp', pullingUpHandler);
        bScrollInstance.on('scroll', scrollHandler);
}
function scrollHandler(e) {
        let y = e.y;
       // your code
       
        if(is_IOS_13_4()) {
            handleIOS_13_4_Shade(y);
        }
}
function pullingDownHandler(e) {
        // your code
}
function pullingUpHandler(e) {
      // your code 
     // 当数据全部加载完成之后记得调用closePullUp()函数 关闭上拉加载
 }
function is_IOS_13_4() {
        let verNum = 0;
        let reg = /OS (\d+[\_\d]+)/g;
        let isIos = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        if(isIos) {
          let iosVer = navigator.appVersion;
          let ver = reg.exec(iosVer)[1];
          let verArr = ver.split('_');
          for(let i = 0; i < verArr.length; i++) {
            if(i !== 0) {
              verNum +=  parseInt(verArr[i]) * 1 / Math.pow(10,i);
            } else {
              verNum += parseInt(verArr[i]);
            }
          }
          verNum = Math.round(verNum * 100) / 100;
          console.log(verNum);
        }
        return isIos && verNum >= 13.4;
}
function handleIOS_13_4_Shade(y) {
        // 解决ios13.4版本下滚动到顶部时列表的抖动问题 -- 下滑
        if(bScrollInstance.movingDirectionY === -1 && (y < 0 && y > -20)) {
            bScrollInstance.scrollTo(0,0,0);
        }

         // 解决ios13.4版本下滚动到底部时列表的抖动问题 -- 上滑
        if (loadFinish && (y - bScrollInstance.maxScrollY) < 20) {
            bScrollInstance.scrollTo(0, bScrollInstance.maxScrollY, 0);
        }
}

maomaoxiyu123 · 2020-05-18T02:11:48Z

  let isTouching = false; //是否正在触摸屏
  let scrollYBottom = 0; //滚动到底部的值
  let isPullingDown = false; //是否在下拉过程中，避免下拉后立刻回弹，保留回弹效果
  let isPullingUp = false; //是否在上拉过程中， 避免上拉后立刻回弹，保留回弹效果

  const ver = navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/);
  //判断ios是否大于13.4
  const isIosVerLgThan1304 = ver && ver.length > 3 && ver[1] >= 13 && ver[2] >= 4; //判断ios是否大于13.4

  const oWrapper = document.getElementById("wrapper");

  const scroll = new BScroll("#wrapper", {});

  if (isIosVerLgThan1304) {
    scroll.on("scroll", (pos) => {
      //根据Y值判断是否下拉结束
      if (pos.y <= 0 && isPullingDown) isPullingDown = false;
      if (pos.y >= scrollYBottom && isPullingUp) isPullingUp = false;

      if (isTouching) return;

      //限制正常滑动过程中scroll顶部回弹
      if (!isPullingDown && pos.y >= 0) {
        scroll.scrollTo(0, 0, 0);
      }

      //限制正常滑动过程中scroll底部回弹
      if (!isPullingUp && scrollYBottom >= pos.y) {
        scroll.scrollYTo(0, scrollYBottom, 0);
      }
    });

    oWrapper.addEventListener("touchstart", () => {
      //每次触摸时重新计算滚动到底部Y值... 解决开启上拉加载后，内容高度会变
      scrollYBottom = scroll.wrapperHeight - scroll.scrollerHeight;
      isTouching = true;
    });
    oWrapper.addEventListener("touchend", () => {
      if (scroll.y > 0) isPullingDown = true; //保持下拉状态
      if (scroll.y < scrollYBottom) isPullingUp = true; //保持上拉状态
      isTouching = false;
    });
  }

上面是从我的react组件中剥离出来的逻辑(简化版)，此段代码没测试过，大致逻辑是这样的。
注：自己封装的react组件中亲测有效，牺牲下13.

今天刚升级的iOS版本就坏了，昨天还好好的

就是iOS 13.4 才会出现的，我现在也遇到了，项目生产环境在用着。急！请问有解决办法吗

请问解决了么

894046832 · 2020-09-29T07:19:57Z

测试：更新到2.0.4修复

chenyulun · 2020-09-30T02:39:50Z

测试：更新到2.0.4修复

不会是你的手机升级了ios14的原因吧

fallenleavesguy · 2023-03-21T03:47:50Z

测试：更新到2.0.4修复

没修复，而且很多浏览器都有问题，用的raf，并且关了回弹功能，滑得愉快还是弹

theniceangel mentioned this issue Apr 2, 2020

ios13.4，滑动太快，会回弹 #982

Closed

dolymood mentioned this issue Apr 24, 2020

在ios上用手轻轻的滑动，页面会有比较明显的抖动 #991

Closed

This was referenced Apr 27, 2020

fix the scrolling problem didi/cube-ui#695

Closed

fix the scrolling problem in iOS13.4 didi/cube-ui#697

Merged

dolymood closed this as completed May 14, 2020

This was referenced Jun 1, 2020

better-scroll在iOS13.4版本下，滑动太快，回到顶部或者底部的时候，会回弹2次 #1013

Closed

ios下快速滚动至底部会有明显的卡顿，滚动至底部卡一下然后自动滚动到底部。 #1012

Closed

chenyulun mentioned this issue Sep 30, 2020

怎么在top等于0时,关闭滚动事件 #1082

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

iOS 13.4 下 bounce 存在异常 #978

iOS 13.4 下 bounce 存在异常 #978

xiaojundebug commented Mar 25, 2020 •

edited

Loading

xiaojundebug commented Mar 25, 2020

tanlucheng commented Apr 1, 2020

theniceangel commented Apr 1, 2020

theniceangel commented Apr 2, 2020

theniceangel commented Apr 2, 2020

theniceangel commented Apr 2, 2020

tanlucheng commented Apr 2, 2020 via email

jemmy-tang commented Apr 15, 2020

jemmy-tang commented Apr 15, 2020 •

edited

Loading

moahmn commented Apr 20, 2020

Fogwind commented May 15, 2020 •

edited

Loading

maomaoxiyu123 commented May 18, 2020

894046832 commented Sep 29, 2020

chenyulun commented Sep 30, 2020

fallenleavesguy commented Mar 21, 2023

iOS 13.4 下 bounce 存在异常 #978

iOS 13.4 下 bounce 存在异常 #978

Comments

xiaojundebug commented Mar 25, 2020 • edited Loading

Version

Reproduction link

Steps to reproduce

What is expected?

What is actually happening?

xiaojundebug commented Mar 25, 2020

tanlucheng commented Apr 1, 2020

theniceangel commented Apr 1, 2020

theniceangel commented Apr 2, 2020

theniceangel commented Apr 2, 2020

theniceangel commented Apr 2, 2020

tanlucheng commented Apr 2, 2020 via email

jemmy-tang commented Apr 15, 2020

jemmy-tang commented Apr 15, 2020 • edited Loading

moahmn commented Apr 20, 2020

Fogwind commented May 15, 2020 • edited Loading

maomaoxiyu123 commented May 18, 2020

894046832 commented Sep 29, 2020

chenyulun commented Sep 30, 2020

fallenleavesguy commented Mar 21, 2023

xiaojundebug commented Mar 25, 2020 •

edited

Loading

jemmy-tang commented Apr 15, 2020 •

edited

Loading

Fogwind commented May 15, 2020 •

edited

Loading