Styles are not updated in time

[Axure]

Version

2.5.13

Reproduction link

https://github.com/Axure/sticky-scroll-demo

Steps to reproduce

npm run dev

and open http://localhost:8080. Scroll inside the region with black border from top to bottom. You will see another div with black border with "text" inside it.

What is expected?

The text should always be right on the midline of the visible area of the smaller bordered div.

What is actually happening?

The text is sometimes not on the midline, which produces visible "lags".

You can see wrongly rendered frames in the developer tools, e.g.:

(Note that for clarity I temporarily set a red border for the div of the text.)

---

An online demo is available at https://axure.github.io/sticky-scroll-demo/.

The effect is achieved by modifying the translateY of the text inside the smaller div on every scroll. It seems that the modified styled is not applied in time, so the a newly scrolled frame is rendered using the old style.

I highly suspect that not only styles, but also other data are not applied in time in possible scenarios.

It is not a problem of the browser, since the raw DOM solution works well:

• source: https://github.com/Axure/stickty-scroll-correct/
• demo: https://axure.github.io/stickty-scroll-correct/

Angular and React do not suffer from this problem:

• React source: https://github.com/Axure/sticky-scroll-react/
• React demo: https://axure.github.io/sticky-scroll-react/
• Angular source: https://github.com/Axure/sticky-scroll-angular/
• Angular demo: https://axure.github.io/sticky-scroll-angular/

[Kingwl]

seems a regression(or a feature) of 2.5.x internal change
i tried on https://jsfiddle.net/2zzydkf4/10/ with 2.4.4
it seems work well
and i have not found the workaround yet

[Leopoldthecoder]

Likely to be related to https://gist.github.com/yyx990803/9bdff05e5468a60ced06c29c39114c6b#intenrals-change-for-nexttick , which is considered to be a fix. Related issue #6854 .

[LinusBorg]

I would argue that Vue is not intended to be used for animations by rapidly changing style value bindings. That would have horrible performance in any but the most simple components, because you will re-render the whole component on every scroll event.

In my opinion., That should rather be done on the DOM level, i.e. with a custom directive, or with a dedicated animation library for biger things.

[javoski]

Looks like it's the deferred rerendering triggered by event handler which produces this problem, you can add scroll event listener manually inside mounted hook to avoid it. For example-https://jsfiddle.net/2zzydkf4/22/

[skyline0705]

Link: vue-nextTick

In the doc, it shows nextTick's callback will be executed after the next DOM update.
this may be a breaking change in Vue 2.x, if necessary, it better to be in Vue 3.x

[Justineo]

Currently $nextTick callbacks are no longer assured to be invoked after DOM updates as stated in the docs, which may lead to confusion. There's no way for normal developers to know such caveat and they would have to have a good knowledge about the internal mechanism in order to use $nextTick without breaking their code.

For most of us one of Vue's best part is that developers wouldn't have to dig into internals to create rather complicated yet performant applications, and “it just works”.

[yyx990803]

I think we'll likely revert to always use microtask in 2.6. The change fixed some really niche edge cases but incurs its own quirks like this which are actually more problematic than the ones fixed.

[fenduru]

@yyx990803 any update on this? The lack of a correct/consistent $nextTick is really causing me problems when trying to ensure that the Vue and other non-Vue parts of my UI are updated in the same frame.

[yyx990803]

Closed via #8450 (will be out in 2.6)