-
-
Notifications
You must be signed in to change notification settings - Fork 33.8k
Description
Version
2.5.1
Reproduction link
https://codepen.io/ericcirone/pen/pWOrMB
Steps to reproduce
Go here - https://codepen.io/ericcirone/pen/pWOrMB
This is on 2.5.1 At < 1000px wide the test list should get hidden. If you go back and forth over that threshold you can make the list flash. It flashes because it is hidden by v-show. But in the CSS i make the list vertical under 1000px. It seems that v-show is firing a too late.
You can see the comparison to 2.4.4 here https://codepen.io/ericcirone/pen/Oxoxzr
On 2.4.4 you can not get the list to flash at the larger size.
What is expected?
List should be hidden at < 1000px.
What is actually happening?
List flashes vertical for a split second before disappearing.
Just noticed this when updating to 2.5.1. Hopefully its a quick fix. I'm using this behavior on a menu bar and now when you make the screen smaller its very janky.
Activity
ericcirone commentedon Oct 13, 2017
Here is a video of the issue, just to further show it.
https://youtu.be/9BRqQa2Q9a4
doits commentedon Oct 14, 2017
It flashes here for me, too, even with 2.4.4. (Firefox 57.0b8)
fritx commentedon Oct 15, 2017
@doits you can try v2.5.2:
https://github.com/vuejs/vue/releases
doits commentedon Oct 15, 2017
@fritx 2.5.2 still flashes for me on resizing: https://codepen.io/anon/pen/PJyOJM
cannap commentedon Oct 16, 2017
i can also see on IE Edge
ericcirone commentedon Oct 16, 2017
The issue definitely seems to be fixed in Chrome, but I do still see the issue in Safari and Firefox. Also I can see the issue in Safari and Firefox on 2.4.4 as well.
@yyx990803 So for situations like this, where I have CSS changing the appearance and Vue changing the appearance and wanting both to work exactly at the same moment, is it safe to say it should just all be done in CSS or all be done in Vue to make sure things are changed exactly at the same time?
fix: further adjust nextTick strategy
fix: further adjust nextTick strategy
fix: further adjust nextTick strategy