4

Chrome に奇妙なバグがあり、固定ナビゲーション ドロップダウン メニューが、ホバーしたときに HTML5 ビデオ タグの上に正しく表示されません。Firefox を確認すると、まったく問題なく動作していますが、Chrome ではクリック可能であるにもかかわらず非表示になっているようです。ドロップダウンとビデオの両方で -webkit-backface-visibility から複数の可能なソリューションを試しました。また、古い Flash/YouTube 埋め込みソリューションで可能な wmode=transparent 属性も試しましたが、何も機能していません。

問題は次の場所で確認できます。

http://spencerfink.net/capers/

注: マイ ナビゲーションとドロップダウン メニューは、位置を固定する必要があります。ユーザーがどこをスクロールしても常にページの上部に表示されるように固定します。位置: 要素の絶対的または相対的な変更が私のニーズを満たしていません。

ドロップダウンを Chrome に表示させる唯一の方法は、ビデオを含む #banner div を -1 の z-index に変更することですが、それはページの下部にある [お問い合わせ] ロールアップ セクションなどに干渉しますz-index シャッフルは、ナビゲーションバーをページ上部の固定位置から切り離してしまいます。

この問題は Owl Carousel のあるページでも発生していますが、解決策は類似または同一だと思います。

紛争地域のHTML

<div id="navbar">
<a href="index.html"><img src="images/capers-logo.png" height="80px" width="115px"></a>
<a href="index.html" id="capers">Creative<br></a>
<ul id="nav">
    <a href="index.html"><li>Home</li></a>
    <a href="our-work.html"><li id="dropdown">Our Work
        <div id="our-work">
            <ul>
                <a href="marketing-landing.html"><li class="blue">Marketing</li></a>
                <a href="augmented-reality.html"><li id="blue">Augmented Reality</li></a>
                <a href="brand-development.html"><li id="blue">Brand Development</li></a>
                <a href="explainer-videos.html"><li id="blue">Explainer Videos</li></a>
                <a href="entertainment-landing.html"><li class="orange">Entertainment</li></a>
                <a href="animation.html"><li id="orange">Animation</li></a>
                <a href="games-apps.html"><li id="orange">Games/Apps</li></a>
                <a href="creative-design.html"><li id="orange">Creative Design</li></a>
            </ul>
        </div>
    </li></a>
    <a href="#"><li>News</li></a>
    <a href="contact-us.html"><li>Contact Us</li></a>
</ul>
<img id="mobile-icon" onClick="toggleMenu()" src="images/menu.png">
<div id="mobile-menu">
    <ul>
        <a href="index.html" onClick="closeMenuLink()"><li>Home</li></a><br>
        <a href="our-work.html" onClick="closeMenuLink()"><li id="dropdown">Our Work</li></a><br>
        <a href="marketing-landing.html"><li class="blue">Marketing</li></a>
        <a href="entertainment-landing.html"><li class="orange">Entertainment</li></a>
        <a href="#" onClick="closeMenuLink()"><li>News</li></a><br>
        <a href="contact-us.html" onClick="closeMenuLink()"><li>Contact Us</li></a>
    </ul>
</div>
</div>

<div id="banner">
<video id="video" autoplay preload="auto" poster="images/placeholder.jpg">
<source src="videos/placeholder.mp4" type="video/mp4">
<source src="videos/placeholder.webm" type="video/webm">
<source src="video/placeholder.ogv" type="video/ogg">
</video>

<a href="marketing-landing.html"><div class="gradient-left" id="gradient-blue-left"></div></a>

<a href="entertainment-landing.html"><div class="gradient-right" id="gradient-orange-right"></div></a>

<a href="marketing-landing.html"><div id="arrow-left"><h2>Marketing</h2></div></a>

<a href="entertainment-landing.html"><div id="arrow-right"><h2>Entertainment</h2></div></a>

<a href="#scrolldown">
    <div id="explore" class="green">
        <h3>Explore</h3>
        <div id="arrow-down"></div>
        <div id="scrolldown"></div>
    </div>
</a>

関連CSS

#navbar {
position: fixed;
overflow: hidden;
top: 0;
font-size: 1.15em;
width: 100%;
max-width: 100%;
height: 80px;
z-index: 3;
background-color: rgba(0, 179, 188, .4);
/*background-color: rgba(255, 255, 255, .8);*/
/*background-image: url(../images/navbar-tiki-pattern.png);*/
box-shadow: 0 2px 2px #555555;
transition: .2s ease-out;
}

#navbar:after {
background-image: url(../images/navbar-texture.jpg);
background-size: cover;
background-repeat: no-repeat;
background-clip: border-box;
position: fixed;
width: 100%;
max-width: 100%;
height: 80px;
overflow: hidden;
top: 0;
left: 0;
opacity: .9;
z-index: -1;
content: ' ';
transition: .2s ease-out;
}

#navbar ul {
position: relative;
list-style: none;
display: inline-block;
margin: -3px 0 0 0;
padding-left: 0;
}

#navbar ul li {
position: relative;
list-style: none;
text-decoration: none;
display: inline-block;
padding: 0 35px;
margin-left: -4px;
margin-top: 0;
line-height: 86px;
transition: .2s ease-out;
opacity: 1;
}

#navbar ul a:first {padding: 0 40px 0 0;}

#navbar ul li:hover {
background-color: rgba(255, 255, 255, .95);
opacity: 1;
color: #7ccd05;
line-height: 78px;
border-top: 8px solid #7ccd05;
}

#navbar a {
font-weight: bold;
text-decoration: none;
color: white;
}

#dropdown:hover a:first-child {color: #7ccd05 !important;}
#dropdown:hover #our-work {height: 120px;}

#our-work {
position: fixed;
top: 80px;
width: 100%;
background-color: rgba(255, 255, 255, .92);
height: 0;
overflow: hidden;
z-index: 4;
line-height: 40px;
box-shadow: 0 2px 2px #555555;
left: 0;
transition: .3s ease-out;
}

#our-work ul {
width: 100%;
}

#our-work ul li {
position: relative;
list-style: none;
text-decoration: none;
display: inline-block;
text-align: center;
border-right: 1px solid #eeeeee;
border-bottom: .5px solid #eeeeee;
padding: 15px 0 0 0;
width: 24.95%;
z-index: 3;
min-width: 190px;
height: 45px;
line-height: 30px;
transition: .2s ease-out;
opacity: 1;
}

#banner {
position: relative;
background-color: white;
text-align: center;
top: 0px;
margin-top: 80px;
width: 100%;
height: auto;
z-index: 1;
max-height: 1000px;
background-position: center;
background-attachment: fixed;
/*background: #f5f6f6; /* Old browsers */
/*background: -moz-linear-gradient(top,  #f5f6f6 0%, #dbdce2 21%, #b8bac6 49%, #dddfe3 80%, #f5f6f6 100%); /* FF3.6+ */
/*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f6f6), color-stop(21%,#dbdce2), color-stop(49%,#b8bac6), color-stop(80%,#dddfe3), color-stop(100%,#f5f6f6)); /* Chrome,Safari4+ */
/*background: -webkit-linear-gradient(top,  #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%); /* Chrome10+,Safari5.1+ */
/*background: -o-linear-gradient(top,  #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%); /* Opera 11.10+ */
/*background: -ms-linear-gradient(top,  #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%); /* IE10+ */
/*background: linear-gradient(to bottom,  #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%); /* W3C */
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-9 */
}

#banner img {
width: 100%;
height: auto;
position: relative;
top: 0;
left: 0;
}

#banner video {
width: 100%;
height: auto;
margin-top: -80px;
position: relative;
z-index: 0;
top: 0;
left: 0;
}

私は答えを求めてウェブを精査してきました!

4

1 に答える 1

5

追加

-webkit-transform: translateZ(0)

問題が発生している要素にアクセスすると、すべてが修正されます。

于 2015-04-05T18:25:44.983 に答える