Merge pull request ustbhuangyi#1116 from ustbhuangyi/fix-ios-blink

Fix ios blink

packages/core/src/animater/Transition.ts

@@ -7,12 +7,19 @@ import {
 } from '@better-scroll/shared-utils'
 import Base from './Base'
 import { TranslaterPoint } from '../translater'
+import { isValidPostion } from '../utils/compat'
 
 export default class Transition extends Base {
-  startProbe() {
+  startProbe(endPoint: TranslaterPoint) {
+    let prePos = this.translater.getComputedPosition()
+    let startPoint = prePos
     const probe = () => {
       let pos = this.translater.getComputedPosition()
-      this.hooks.trigger(this.hooks.eventTypes.move, pos)
+      if (isValidPostion(startPoint, endPoint, pos, prePos)) {
+        this.hooks.trigger(this.hooks.eventTypes.move, pos)
+      }
+      prePos = pos
+
       // transition ends should dispatch end hook.
       // but when call stop() in animation.hooks.move or bs.scroll
       // should not dispatch end hook, because forceStop hook will do this.
@@ -55,7 +62,7 @@ export default class Transition extends Base {
     this.translate(endPoint)
 
     if (time && this.options.probeType === Probe.Realtime) {
-      this.startProbe()
+      this.startProbe(endPoint)
     }
 
     // if we change content's transformY in a tick

packages/core/src/animater/__tests__/Transition.spec.ts

@@ -125,7 +125,10 @@ describe('Transition Class test suit', () => {
     transition.destroy()
   })
   it('should startProbe with probeType=3', () => {
-    const { transition } = createTransition(3)
+    const { transition, translater } = createTransition(3)
+    translater.getComputedPosition = jest.fn().mockImplementation(() => {
+      return { x: 0, y: 0 }
+    })
     mockRequestAnimationFrame.mockImplementation((cb) => {
       setTimeout(() => {
         cb()

packages/core/src/utils/compat.ts

@@ -0,0 +1,36 @@
+import { Direction } from '@better-scroll/shared-utils'
+import { TranslaterPoint } from '../translater'
+
+type Position = {
+  x: number
+  y: number
+}
+// iOS 13.6 - 14.x, window.getComputedStyle sometimes will get wrong transform value
+// when bs use transition mode
+// eg: translateY -100px -> -200px, when the last frame which is about to scroll to -200px
+// window.getComputedStyle(this.content) will calculate transformY to be -100px(startPoint)
+// it is weird
+// so we should validate position caculated by 'window.getComputedStyle'
+export const isValidPostion = (
+  startPoint: TranslaterPoint,
+  endPoint: TranslaterPoint,
+  currentPos: Position,
+  prePos: Position
+) => {
+  const computeDirection = (endValue: number, startValue: number) => {
+    const delta = endValue - startValue
+    const direction =
+      delta > 0
+        ? Direction.Negative
+        : delta < 0
+        ? Direction.Positive
+        : Direction.Default
+    return direction
+  }
+  const directionX = computeDirection(endPoint.x, startPoint.x)
+  const directionY = computeDirection(endPoint.y, startPoint.y)
+  const deltaX = currentPos.x - prePos.x
+  const deltaY = currentPos.y - prePos.y
+
+  return directionX * deltaX <= 0 && directionY * deltaY <= 0
+}

packages/slide/src/__tests__/index.spec.ts

@@ -63,6 +63,14 @@ describe('slide test for SlidePage class', () => {
         key: 'getCurrentPage',
         sourceKey: 'plugins.slide.getCurrentPage',
       },
+      {
+        key: 'startPlay',
+        sourceKey: 'plugins.slide.startPlay',
+      },
+      {
+        key: 'pausePlay',
+        sourceKey: 'plugins.slide.pausePlay',
+      },
     ])
   })
 

packages/slide/src/propertiesConfig.ts

@@ -2,25 +2,33 @@ const sourcePrefix = 'plugins.slide'
 const propertiesMap = [
   {
     key: 'next',
-    name: 'next'
+    name: 'next',
   },
   {
     key: 'prev',
-    name: 'prev'
+    name: 'prev',
   },
   {
     key: 'goToPage',
-    name: 'goToPage'
+    name: 'goToPage',
   },
   {
     key: 'getCurrentPage',
-    name: 'getCurrentPage'
-  }
+    name: 'getCurrentPage',
+  },
+  {
+    key: 'startPlay',
+    name: 'startPlay',
+  },
+  {
+    key: 'pausePlay',
+    name: 'pausePlay',
+  },
 ]
 
-export default propertiesMap.map(item => {
+export default propertiesMap.map((item) => {
   return {
     key: item.key,
-    sourceKey: `${sourcePrefix}.${item.name}`
+    sourceKey: `${sourcePrefix}.${item.name}`,
   }
 })

packages/wheel/src/index.ts

@@ -161,7 +161,7 @@ export default class Wheel implements PluginAPI {
 
         this.itemHeight =
           this.items.length > 0
-            ? Math.floor(scrollBehaviorY.contentSize / this.items.length)
+            ? scrollBehaviorY.contentSize / this.items.length
             : 0
 
         boundary.maxScrollPos = -this.itemHeight * (this.items.length - 1)