Within a div, there is a modal component that includes a transform: translate3d effect with hover transition. The div is created using vue.js list rendering method. Upon opening the modal and hovering over it, it jerks between the parent div and its intended position.
You can see how the modal should function here: https://jsfiddle.net/yyx990803/mwLbw11k/?utm_source=website&utm_medium=embed&utm_campaign=mwLbw11k
<button id="show-modal" @click="showModal = true">Show Modal</button>
<modal v-if="showModal" @close="showModal = false">
<h3 slot="header">custom header</h3>
</modal>
Here is the current situation: https://jsfiddle.net/olivetum/bxwjb9co/
To address the issue, I tried using the css method :not(.className) and applied a blocking class to the parent div. While this helps, there is still a slight glitch during modal enter/leave transitions: https://jsfiddle.net/olivetum/3yrrnhsj/
Any suggestions on how to eliminate this glitch?