ustbhuangyi / better-scroll

:scroll: inspired by iscroll, and it supports more features and has a better scroll perfermance
https://better-scroll.github.io/docs/en-US/
MIT License
16.47k stars 2.61k forks source link

useTransform is not implemented? #1084

Closed wclr closed 4 years ago

wclr commented 4 years ago

In iScroll there was an option useTransform which made iScroll use left/top props instead of transform/translate. So it is not implemented, wonder why? It is really useful on desktop browsers for example on windows where chrome/firefox while css translating is blurring the content, and when left/top are used content is not blurred. Desktop performance usually is not suffering, but the visual effect is much better.

I tried to implement it using beforeTranslate hook, but it allows only to affect transform style. And using hacky method like:

     hooks.on('beforeTranslate', (transformStyle, point) => {
         transformStyle.splice(0, Infinity)
         Promise.resolve().then(() => {
           const wrapper = elm.children[0] as HTMLElement
           wrapper.style.left = point.x + 'px'
           wrapper.style.top = point.y + 'px'
         })        
      })

doesn't seem to work well.

wclr commented 4 years ago

Normalizing coordinate to integer value solves the severe blurry effect issue, though it solved not completely comparing to using left/top, the animation moment still comes along with some blurry effect.

theniceangel commented 4 years ago

The reason that drop left / top implementation in v2 is performance and users do not have to bear the burden of additional configuration, as you mentioned, you can use beforeTranslate hook to normalize coordinate to integer value to solve your troubles

wclr commented 4 years ago

Ok, but still the effect on the desktop is a little bit different.

wclr commented 3 years ago

@theniceangel

I would encourage you to reconsider this, and an option to transform position using left/top as iscroll does. Maybe you could do it plugable. I have to rollback to iscroll, because the visual effect of blurring in webkit based browsers on windows are barely acceptable. Normalizing coors doesn't save.