谷歌浏览器中的position:fixed边框半径overflow:hidden问题

Question

我在使用border-radius对position:fixed元素进行样式设置时，遇到了Google Chrome的问题，同时使用了overflow:hidden属性，但似乎不起作用。当您悬停在导航项上时，红色背景的.bmopt div应被剪裁为#mstrip的形状，但实际上它只显示为标准矩形。

HTML:

<div id='mstrip'>
    <div class='mlabel first'>
        <a href='#' class='mopt'>Item1</a>
        <div class='bmopt'></div>
    </div>
    <div class='mlabel'>
        <a href='#' class='mopt'>Item2</a>
        <div class='bmopt'></div>
    </div>
    <div class='mlabel'>
        <a href='#' class='mopt'>Item3</a>
        <div class='bmopt'></div>
    </div>
    <div class='mlabel'>
        <a href='#' class='mopt'>Item4</a>
        <div class='bmopt'></div>
    </div>
    <div class='mlabel'>
        <a href='#' class='mopt'>Item5</a>
        <div class='bmopt'></div>
    </div>
</div>

CSS:

#mstrip {
    width: 92px;
    height: 223px;
    position: fixed;
    top: 20px;
    border-radius: 40% 8px;
    z-index: 100;
    background: #000;
    overflow: hidden;
    box-shadow: 0 0 4px #000;
}
.mlabel {
    width: 92px;
    height: 35px;
}
.first {
    margin-top: 24px;
}
.mopt {
    display: block;
    width: 92px;
    height: 29px;
    padding-top: 6px;
    text-align: center;
    color: #FFF;
    text-decoration: none;
    font: menu;
    font-size: 0.9em;
    text-shadow: 0 0 1px #FFF;
}
.bmopt {
    position: relative;
    width: 92px;
    height: 35px;
    background: #F00;
    margin-top: -35px;
    z-index: -1;
}

这里有一个关于这个bug的工作示例：http://jsfiddle.net/UxLHR/7/ 有没有什么解决方法？

- user1885099

Answer 1

我认为问题出在更改元素的不透明度上；这会创建一个单独的堆叠上下文，可能是错误的根源。

我已经通过简化解决了这个问题；只需在悬停时更改 mlabel 类的颜色，并对其进行转换。我认为内部 div 不是必需的。

.mlabel {
    width: 92px;
    height: 35px;
    background-color: black;
    -webkit-transition: background-color 1s;
}
.mlabel:hover {
    background-color: red;
}

更新的fiddle

(仅适用于webkit的过渡效果)

- vals

---

我使用的是Chrome 26，但这并没有解决问题。事实上，它看起来比原来更糟糕。 - tw16

我使用的是Chrome 26.0.1410.64 m，它对我来说是有效的。但是我发现我正在使用90%的缩放比例。当我将缩放比例设置为90%时，它可以工作，但当缩放比例为100%时则无法正常工作。非常奇怪。 - vals