CSS3 刷新时 chrome 转换中断

Question

环顾四周，没有发现任何类似的东西 - 发现这真的很奇怪。

我为页面底部的菜单加载了一个简单的动画，在加载几秒钟后将文本向上滑动（以允许其他动画完成）。这在 firefox、IE、android 浏览器和 chrome for android 上绝对有效。但是当我在桌面上测试它时 Chrome (44)，它并不完全有效。

当我第一次加载页面（已清除 cache/incognito）时，动画将起作用。但每次我加载页面时，它都会中断 - 我不知道为什么。

只有当我将 div 中的一个跨度包装在 link 中时才会发生这种情况。

动画是这样的：

@-webkit-keyframes fadeInBottom {
    0% {
       opacity: 0;
       -webkit-transform: translateY(15vw);
    }
    100% {
       opacity: 1;
       -webkit-transform: translateY(0);
    }
}

@-moz-keyframes fadeInBottom {
    0% {
       opacity: 0;
       -moz-transform: translateY(15vw);
    }
    100% {
       opacity: 1;
       -moz-transform: translateY(0);
    }
}

@keyframes fadeInBottom {
    0% {
       opacity: 0;
       transform: translateY(15vw);
    }
    100% {
       opacity: 1;
       transform: translateY(0);
    }
}

跨度的 css：

.basePanel{
    z-index:999;
    height: 5vw;
    width: 100vw;
    position:absolute;
    bottom:0;
    font-size:4vw;
    color:#f1f8f0;
    display:inline-block;
    font-family:coda, courier;
    -webkit-animation-name: fadeInBottom;
    -webkit-animation-fill-mode: both;
    -webkit-animation-duration: 1.3s;
    -webkit-animation-delay:1.8s;
    -moz-animation-name: fadeInBottom;
    -moz-animation-fill-mode: both;
    -moz-animation-duration: 1.3s;
    -moz-animation-delay:1.8s;
    animation-name: fadeInBottom;
    animation-fill-mode: both;
    animation-duration: 1.3s;
    animation-delay:1.8s;

}
#contact{
    padding-top: 15vh;
    position:relative;
    font-family:coda, courier;
    text-align:left;
    color:#f1f8f0;
    font-size:6vw;
}
.button{
    position:relative;
    text-align:center;
    width:32.1vw;
    -webkit-transition: background-color 0.3s linear;
    -moz-transition: background-color 0.3s linear;
    -o-transition: background-color 0.3s linear;
    -ms-transition: background-color 0.3s linear;
    transition: background-color 0.3s linear;
}

.button:hover{
    background-color: #252c24;
    -webkit-transition: background-color 0.5s linear;
    -moz-transition: background-color 0.5s linear;
    -o-transition: background-color 0.5s linear;
    -ms-transition: background-color 0.5s linear;
    transition: background-color 0.5s linear;
}

.centre{
    width:32.15vw;
}

和相关的html:

<div class="basePanel">
    <span class="left basePanel button">About</span>
    <span class="centre basePanel button">Portfolio</span>
    <a href="contact">
        <span class="right basePanel button">Contact</span>
    </a>
</div>

这是一个 fiddle 与相关的 HTML 和 CSS: https://jsfiddle.net/bqLLqbwc/

烦人的是，这实际上适用于 Chrome。要查看损坏的页面，这是我正在处理的实际网页：http://www.devox.org

我在两台电脑上测试过，一台运行 windows 7，另一台运行 ubuntu 14.04，都是运行 chrome 44.

Answer 1

所以我最终对 html 进行了一些重组。

虽然感觉将 <div> 标签包裹在 <a> 标签中会更容易，但在 Chrome 中似乎行不通。也许它解决了 HTML5 天之前的一些遗留错误。我不知道。

所以我将 <a> 标签包裹在 <span> 标签中，并更改 css 使其填充 div 并删除任何装饰：

html:

<span class="right basePanel button"><a href="contact">Contact</a></span>

css:

.button a{
    color: #f1f8f0;
    display:block;
    height: 100%;
    width: 100%;
    text-decoration:none;
}

.button a:visited{color:#f1f8f0;}

这似乎工作正常。

CSS3 刷新时 chrome 转换中断

CSS3 transition breaks in chrome on refresh

html

css

google-chrome

css-animations