Strange behavior vue's transition tag with v-show in google chrome when element is hidden on start

I have left sidebar. And I have a toggle menu icon which open left sidebar on click. When browser is in mobile mode then left side bar is hidden and toggle menu icon is visible.

<transition 
    name="sidebar-left-slide" 
    mode="out-in"
>
	<div 
	id="sidebar-left" 
	v-show="stateSidebarLeft"
	ref="sidebar-left"
	class="sidebar-left" 
	v-bind:style=""
	>
		This is content of left sidebar
	</div>
</transition>

This is my css code:

.sidebar-left-slide-enter-active,
.sidebar-left-slide-leave-active{
    transition: opacity 10s ease, transform 10s ease;
}

.sidebar-left-slide-enter-to{
    opacity: 1;
    transform: translateX(0);
}

.sidebar-left-slide-enter,
.sidebar-left-slide-leave-to{
    opacity: 0;
    transform: translateX(-100%);
}

When I click first time on menu icon in firefox then left sidebar move slowly from left to right. When I click first time on menu icon in google chrome then left sidebar appear quickly without transition. All next clicks on menu icon in google chrome works as I expected just like in the firefox.
Is this a vue bug?

Edited: When I changed v-show to v-if it works as I expected in google chrome at first click.

Here is an example of the problem: https://jsfiddle.net/b8dnf72c/10/

Is this bug in the vue or in the google chrome?

It has to do with how browsers calculate the box model. Each browser may do it differently. When animating, it’s often best to use the FLIP technique where you first define the final state and then animate from another state to the final state - it looks like you are doing this, but I’m just stating this for others that may see this thread.

The issue that Chrome seems to be having is that it doesn’t know what that final state is in terms of width. I guess to it 20% is too arbitrary so it seems to struggle with the initial animation calculations. I believe the fallback to this situation is to abort any transitions and instead render the final state. So I guess you could say this is sort of a browser bug, but also something that we as developers need to be aware of.

The solution (at least in Chrome, I haven’t tested any other browsers) is to define a max-width of 100vw. Here’s a working version: https://jsfiddle.net/jamesbrndwgn/1eLg8zdp/2/

Though testing this on mobile Chrome shows that at the end of the transition it becomes a bit janky. Not really sure what’s causing that though. It’s doing it even with set px widths so thats fun. I’ve often had to jump through hoops to get something like this working on all browsers perfectly.

James, thank you for your reply. It looks like that strange behavior begin only when opened developers panel in google chrome and transitioned div is selected in DOM-tree in panel “Elements”. If I deselect transitioning div (I mean, if I click on another node of the DOM-tree or even close developers panel) transition will go smoothly as in the firefox and as I expected.

Have you tried on an actual mobile device? It was smooth for me as well, but I tried on my iPhone Chrome browser and it had that jank.

I will try in few minutes.

I can not open jsfiddle on my iPhone’s Safari. I see only jumping cloud last few minutes. I have not google chrome on iPhone.
I have my real code only on my localhost.

You can open the embedded version on your phone. i.e. https://jsfiddle.net/jamesbrndwgn/1eLg8zdp/2/embedded/result

1 Like

I have opened embedded link in iPhone’s safari and it works as expected.