Safari不会在窗口大小调整

Question

我使用CSS3将元素转换并淡入不同的位置，具体取决于使用@media查询的两个不同的屏幕宽度。它的工作原理与我在最新的Chrome和Firefox中的预期完全相同。 Safari 10出现问题。调整窗口大小时，无论是否再次触发@media查询，都不会重新呈现100％关键帧。带有＆＃34; animate-div＆＃34;的div class保持在最后一次转换到初始页面加载的固定位置的位置。这是我所谈论的内容的片段。谢谢！

是的，我的头部有一个视口HTML标记。

.animate-div {
    opacity: 0;
    animation: divIn 2800ms forwards ease-in-out;
}

@media only screen and (min-width: 768px) {

    @keyframes divIn {
        0% {
            height: 12vw;
            width: 12vw;
            opacity: 0;
            transform: translate(44vw, calc(50vh - 6vw));
        }
        50% {
            height: 16vw;
            width: 16vw;
            opacity: 1;
            transform: translate(42vw, calc(50vh - 8vw));
        }
        100% {
            height: 17vw;
            width: 17vw;
            opacity: 1;
            transform: translate(2vw, 2vw);
            margin-bottom: 3vw;
        }
    }

}

@media only screen and (max-width: 768px) {

    @keyframes divIn {
        0% {
            height: 26vw;
            width: 26vw;
            opacity: 0;
            transform: translate(37vw, calc(50vh - 13vw));
        }
        50% {
            height: 30vw;
            width: 30vw;
            opacity: 1;
            transform: translate(35vw, calc(50vh - 15vw));
        }
        100% {
            height: 30vw;
            width: 30vw;
            opacity: 1;
            transform: translate(35vw, 1vw);
            margin-bottom: 2vw;
        }
    }

}