2

JavaScript スクロール イベントによってトリガーされる CSS トランジションを使用して要素を明らかにしていますが、このトランジションは、Mac (10.6.8) の Safari (5.1.7) および Chrome (27.0.1453.93) で隣接する要素の背景色に影響を与えています。 ) まったく意味がありません。バグに遭遇したと思います。

次の簡素化されたコードのみを使用して Safari で問題を再現し、jsfiddle ( http://jsfiddle.net/5AEMF/ ) を作成しましたが、そのフレームワーク内では問題は発生しません。

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Opacity transition affecting color of adjacent element</title>
<style>
* {
    margin: 0;
    padding: 0;
}

#bar {
    height: 100px;
    background-color: #FF0000;
}

#content {
    opacity: 0;
    height: 9999px;
    background-color: #0000FF;
    -webkit-transition: opacity 0.25s ease-in-out;
    -moz-transition: opacity 0.25s ease-in-out;
    -o-transition: opacity 0.25s ease-in-out;
    transition: opacity 0.25s ease-in-out;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

#content.scrolled {
    opacity: 1;
}
</style>

<script type="text/javascript">
var scrolled = false;

var init = function() {
    onScroll(null);
    window.addEventListener('scroll', onScroll);
};

var onScroll = function(e) {
    if (window.scrollY > 0 && !scrolled) {
        scrolled = true;
        document.getElementById('content').className = 'scrolled';
    } else if (window.scrollY === 0 && scrolled) {
        scrolled = false;
        document.getElementById('content').removeAttribute('class');
    }
};

window.addEventListener('load', init);
</script>
</head>
<body>
<div id="bar"></div>
<div id="content"></div>
</body>
</html>

この問題の回避策があるかどうか疑問に思っています。どんな助けでも大歓迎です。

4

1 に答える 1

0

RGB 形式の色を使用します。例:color:rgba(255, 106, 0, 0.24)このプロパティの最後のパラメーター 0.24 は不透明度です。0にすると透明になります。

于 2013-09-17T11:13:13.513 に答える