javascript - Div 在 Safari 10.0.1 上未正确呈现(就像是否存在溢出 :hidden somewhere but there isn't)

Question

我有一个子菜单，当用户将鼠标悬停在主菜单项上时会显示该子菜单。它在除 Safari 之外的所有浏览器中都能正常工作(我有 10.0.1 版)。

我深入研究了代码，但没有找到任何解决方案。似乎某处存在某种溢出问题，但我无法找到位置。

这是 Chrome 上的预期行为: Working menu on Chrome

这是在 Safari 上的结果: Issue on Safari

我在 Stackoverflow 上做了一些研究，但没有发现任何有用的东西，主要是因为我什至不知道要使用什么关键字。

这是网站:http://stage.federicalotti.com/

HTML代码:

<div class="nav-wrap">

    <nav id="nav">
        <div class="container">

            <div class="main-menu">
                <ul id="menu-menu-principale" class="menu">
                    <li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-6 current_page_item menu-item-16">
                        <a href="http://stage.federicalotti.com/">
                            <span class="menu-text">Homepage</span>
                            <span class="menu-arrow"></span>
                        </a>
                    </li>
                    <li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19">
                        <a href="http://stage.federicalotti.com/biografia/">
                            <span class="menu-text">Biografia</span>
                            <span class="menu-arrow"></span>
                        </a>
                    </li>
                    <li id="menu-item-24" class="no-link menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-24">
                        <a href="#">
                            <span class="menu-text">Repertorio</span>
                            <span class="menu-arrow"></span>
                        </a>
                        <ul class="sub-menu">
                            <li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26">
                                <a href="http://stage.federicalotti.com/lista-brani/">
                                    <span class="menu-text">Lista brani</span>
                                    <span class="menu-arrow"></span>
                                </a>
                            </li>
                            <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25">
                                <a href="http://stage.federicalotti.com/proposte-concertistiche/">
                                    <span class="menu-text">Proposte concertistiche</span>
                                    <span class="menu-arrow"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47">
                        <a href="http://stage.federicalotti.com/concerti/">
                            <span class="menu-text">Concerti</span>
                            <span class="menu-arrow"></span>
                        </a>
                    </li>
                    <li id="menu-item-48" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-48">
                        <a href="#">
                            <span class="menu-text">Media</span>
                            <span class="menu-arrow"></span>
                        </a>
                        <ul class="sub-menu">
                            <li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46">
                                <a href="http://stage.federicalotti.com/fotografie/">
                                    <span class="menu-text">Fotografie</span>
                                    <span class="menu-arrow"></span>
                                </a>
                            </li>
                            <li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45">
                                <a href="http://stage.federicalotti.com/audio-files/">
                                    <span class="menu-text">Audio files</span>
                                    <span class="menu-arrow"></span>
                                </a>
                            </li>
                            <li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44">
                                <a href="http://stage.federicalotti.com/riprese-video/">
                                    <span class="menu-text">Riprese video</span>
                                    <span class="menu-arrow"></span>
                                </a>
                            </li>
                            <li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43">
                                <a href="http://stage.federicalotti.com/rassegna-stampa/">
                                    <span class="menu-text">Rassegna stampa</span>
                                    <span class="menu-arrow"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42">
                        <a href="http://stage.federicalotti.com/news/">
                            <span class="menu-text">News</span>
                            <span class="menu-arrow"></span>
                        </a>
                    </li>
                    <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41">
                        <a href="http://stage.federicalotti.com/contatti/">
                            <span class="menu-text">Contatti</span>
                            <span class="menu-arrow"></span>
                        </a>
                    </li>
                </ul>
            </div><!-- .main-menu -->

            <div class="search-bar-mobile">
                <div class="container">
                    <form role="search" method="get" class="search-form" action="http://stage.federicalotti.com/">
                        <label>
                            <span class="screen-reader-text">Cerca:</span>
                            <input type="text" class="search-field" autocomplete="off" placeholder="Cerca..." name="s" title="Cerca:">
                        </label>
                        <input type="submit" class="search-submit" value="Cerca">
                    </form>
                </div><!-- .container -->
            </div><!-- .search-bar-mobile -->

        </div><!-- .container -->
    </nav>

    <div class="search-bar">
        <div class="container">
            <form role="search" method="get" class="search-form" action="http://stage.federicalotti.com/">
                <label>
                    <span class="screen-reader-text">Cerca:</span>
                    <input type="text" class="search-field" autocomplete="off" placeholder="Cerca..." name="s" title="Cerca:">
                </label>
                <input type="submit" class="search-submit" value="Cerca">
            </form>
        </div><!-- .container -->
    </div><!-- .search-bar -->

</div><!-- .nav-wrap -->

Sass 代码:

/*
 * nav
 */

.nav-wrap {
    perspective: 1000px;
}
#nav {
    position: absolute;
    background: #FFF;
    left: 0;
    top: 0;
    height: 80px;
    width: 100%;
    border-top: 1px solid #f1f1f1;
    z-index: 5;
    box-shadow: 0 0 145px 0 rgba(0,0,0,0.17);

    visibility: hidden;
    opacity: 0;
    transform: rotateX(-30deg);
    transform-origin: top;
    transition: 0.2s;

    &.open {
        visibility: visible;
        opacity: 1;
        transform: rotate(0);
    }
}

.main-menu {
    text-align: center;

    > ul > li {
        list-style: none;
        display: inline-block;
        line-height: 80px;
        padding: 0 20px;
        position: relative;

        > a:link,
        > a:visited {
            display: block;
            text-decoration: none;
            font-size: 13px;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            color: #000;
            transition: 0.1s;
        }
        > a:hover {
            color: $verde;
        }

        &.no-link {
            > a:hover {
                cursor: default;
            }
        }

        > .sub-menu {
            position: absolute;
            background: transparent;
            width: 320px;
            padding: 2px 0;
            top: 80px;
            left: -10px;
            display: none;

            > li {
                list-style: none;
                display: block;
                padding: 2px 0;
                line-height: normal;

                > a:link,
                > a:visited {
                    display: block;
                    position: relative;
                    width: 100%;
                    background: #FFF;
                    color: #000;
                    letter-spacing: 1.2px;
                    font-size: 13px;
                    padding: 22px 30px;
                    box-sizing: border-box;
                    text-align: left;
                    text-transform: uppercase;
                    text-decoration: none;
                    box-shadow: 0 5px 50px rgba(0, 0, 0, 0.11);
                    opacity: 0;
                    transform: translateY(30px);
                }
                > a:hover {
                    color: $verde;
                }
            }
        }

    }
}

jQuery 代码(我正在使用 velocity.js ):

qode = {

    window:         $(window),
    html:           $('html'),
    body:           $('body'),
    nav:            $('#nav'),
    burgerWrap:     $('.burger-wrap'),
    searchBar:      $('.search-bar'),
    header:         $('#header'),
    wrapper:        $('#wrapper')

};

/*
 * Mouse enter animation
 */

qode.body.on('mouseenter', '.main-menu > ul > li', function(){

    if ( qode.wrapper.width() > 1024 ) {

        var self        = $(this),
            subMenu     = self.find('> .sub-menu'),
            elements    = self.find('> .sub-menu > li a');

        subMenu.stop().fadeToggle(0);

        elements.stop().each(function(index){

            $(this).stop();

            $(this).velocity({
                opacity: [ 1, 0 ],
                translateY: [ 0, '30px' ]
            }, {
                delay: 75 * index,
                duration: 200
            });

        });

    } // if wrapper width

});

/*
 * Mouse leave animation
 */

qode.body.on('mouseleave', '.main-menu > ul > li', function(){

    if ( qode.wrapper.width() > 1024 ) {

        var self        = $(this),
            subMenu     = self.find('> .sub-menu'),
            elements    = self.find('> .sub-menu > li a');

        $( elements.get().reverse() ).stop().each(function(index){

            $(this).velocity({
                opacity: [ 0, 1 ],
                translateY: [ '30px', 0 ]
            }, {
                delay: 75 * index,
                duration: 200,
                complete: function(elems){
                    if ( elements.length === ( index + 1 ) ) {
                        subMenu.stop().fadeToggle(0);
                    }
                }
            });

        });

    } // if wrapper width

});

Answer 1

您没有在 .open 上设置 z-index。我猜在 Safari 中它以不同的方式继承？

&.open {
    visibility: visible;
    opacity: 1;
    transform: rotate(0);
    z-index:6; // Make sure the z-index is higher as the one of the page content. 
}