html - Chrome 上的 webkit 动画故障

Question

我有一个 HTML/CSS 菜单，可以在 CSS:hover 效果上向左或向右打开。它似乎在大多数现代浏览器上运行良好，但在 Chrome 上，当效果向左时，文本会出现一些故障。

fiddle

HTML:

<ul class="tabs">
<li class="rotateL work_link"><a href="#">WORK</a>
<ul class="submenu">
<li><a href="#house" class="work">housing</a></li>
<li><a href="#interior" class="work">interior</a></li>
<li><a href="#public-space" class="work">public space</a></li>
<li><a href="#public-buildings" class="work">public buildings</a></li>
<li><a href="#planing" class="work">planing</a></li>
<li><a href="#design" class="work">design</a></li>
<li><a href="#search" class="work" id="searchlink">search</a></li>
</ul>
</li>
<li class="rotateR practise_link"><a href="#">PRACTICE</a>
<ul class="submenu">
<li><a href="#mission" class="practise">mission</a></li>
<li><a href="#history" class="practise">history</a></li>
<li><a href="#services" class="practise">services</a></li>
<li><a href="#awards" class="practise">awards</a></li>
</ul>
</li>
</ul>

CSS:

ul.tabs, ul.tabs ul {
margin:0 auto;
padding:0;
list-style:none;
font-size: 7pt;
}
ul.tabs > li {
border: 1px solid #fff;
position:relative;
}
ul.tabs > li > a {
float:left;
width:18px;
}
ul.tabs li:hover > a {font-weight: bold; }
ul.tabs li ul {
position:absolute;
left:0;
opacity:0;
height:0;
width:0;
overflow:hidden;
background: #fff;
vertical-align: bottom;
/*display: table;*/
}
ul.tabs li li { line-height: 12pt; white-space: nowrap;}
ul.tabs ul a {
line-height: 12pt;
background:#fff;
margin-bottom:-1px;
text-decoration:none;
color:#000;
text-transform: uppercase;
display: block;
padding: 0px 2px;
}
ul.tabs:hover li ul {
    display: block;
    opacity: 1;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}

ul.tabs li.rotateL, ul.tabs li.rotateR { background: #fff; width: 18px;}
ul.tabs li.rotateL > a,ul.tabs li.rotateR > a { 
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    display: block;
    bottom: 10px;
    position: absolute;
    color: #000;
    font-weight: normal;
    text-decoration: none;
    white-space: nowrap;
}
ul.tabs li.rotateL > a:hover, ul.tabs li.rotateR > a:hover { font-weight: normal; }
ul.tabs li.rotateR ul {
left: -127px;
top: -1px;
text-align: right;
border-right: 1px solid #111;
}
ul.tabs li.rotateL ul {
left:19px;
top: -1px;
white-space:normal;
border-left: 1px solid #111;
}

li.work_link {
    left: 40px;
    height: 151px;
    display: block;
    color: #000;
    cursor: pointer;
}
ul.tabs li.work_link ul {
    height: 108px;
    width: 110px;
    vertical-align: bottom;
    padding-top: 45px;
}
ul.tabs:hover li.work_link ul:not(.active) {
    animation:workLink 2s 1;
    -webkit-animation:workLink 2s 1; /*Safari and Chrome*/
}
@keyframes workLink
{
from {width: 0px; }
to {width: 110px; }
}

@-webkit-keyframes workLink /*Safari and Chrome*/
{
from {width: 0px;  }
to {width: 110px; }
}

li.practise_link {
    left: 165px;
    height: 98px;
    display: block;
    cursor: pointer;
}
ul.tabs li.practise_link ul {
    height: 64px;
    padding-top: 36px;
    width: 58px;
    left: -58px

}
ul.tabs:hover li.practise_link ul:not(.active) {
    animation:practiseLink 2s 1;
    -webkit-animation:practiseLink 2s 1; /*Safari and Chrome*/
}
@keyframes practiseLink
{
from {width: 0px; left: -2px}
to {width: 58px; left: -58px}
}

@-webkit-keyframes practiseLink /*Safari and Chrome*/
{
from {width: 0px; left: -2px; }
to {width: 58px; left: -58px; }
}

如果代码太乱，请告诉我，我想我应该研究另一个更简单的解决方案:/

提前致谢。

Answer 1

这是一个真实答案，因此您可以将其标记为正确答案。抱歉重复。

I have no solution out of the box right now, but I can tell you that it's caused by the right-aligned text. It "shakes" when the browser recalculate the text position while animating. You should try to set the element width (mixed with overflow:hidden) to avoid this recalculation.