Chrome 中两个独立元素的 CSS 转换时间关闭

Question

如何解决 chrome 中的这个计时问题？在 firefox 中，关闭动画进行得很顺利，但在 chrome 中，这两个元素都关闭了。我无法将元素放在一个容器中进行过渡。

请注意幻灯片中 Canvas 和按钮之间的白色边框。他们有点偏离。

$(document).ready(function () {
    var OffCanvasWidget = {
        options: {
            id: 'OffCanvasWidget',
            trigger: $('[data-offcanvas-trigger]'),
            close: $('[data-offcanvas-close]')
        },

        init: function () {
            this.addListeners();
        },
        addListeners: function () {
            var that = this;
            this.options.trigger.on('click', function (event) {
                event.preventDefault();
                that.toggleOffCanvas();
            });
        },
        toggleOffCanvas: function () {
            $('body').toggleClass('offcanvas-show');
        }
    };
    OffCanvasWidget.init();
});

.trigger {
    transition: transform .7s ease;
    display: inline-block;
    transform: rotate3d(0, 0, 1, -90deg) perspective(1px) scale(1.001);
    position: fixed;
    right: -22px;
    top: 30vh;
}

.offcanvas-show .trigger {
    transform: translateX(-218px) rotate3d(0, 0, 1, -90deg) perspective(1px) scale(1.001);
}

.offcanvas {
    transform: translateX(100%);
    position: fixed;
    transition: transform .7s ease;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 200px;
}
.offcanvas-show .offcanvas {
     transform: translateX(0);
}

.trigger, .offcanvas {
    background-color: black;
    color: white;
    padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="trigger" data-offcanvas-trigger>Follow us</a>
<div class="offcanvas">
    
</div>

Answer 1

为什么不让“制表符”元素更宽一点，这样它就足够“覆盖”托盘，以至于不会注意到任何间隙 :)