3

I am having issues with Google Chrome while using border-radius on a position:fixed element with overflow:hidden. The overflow attribute does not seem to be working. When you hover over the navigation items the div with the red background, .bmopt, is supposed to be clipped to the shape of #mstrip, but instead it just shows as a standard rectangle.

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;
}

Here is a working example of this bug: http://jsfiddle.net/UxLHR/7/

Is there a way around this?

4

1 に答える 1

0

要素の不透明度を変更すると問題が発生すると思います。これは別のスタック コンテキストを作成し、おそらくバグの原因です。

私はそれを解決して簡単にしました。ホバー時にmlabelクラスの色を変更し、これにトランジションを設定するだけです。内部divは必要ないと思います。

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

更新されたフィドル

(webkitのみの遷移)

于 2013-04-20T20:08:15.857 に答える