堆栈内存溢出
  繁体   English   中英

Div无法在Safari 10.0.1上正确呈现（例如是否存在溢出：隐藏在某处但没有）

[英]Div is not correctly rendered on Safari 10.0.1 (like if there is an overflow:hidden somewhere but there isn't)

 原文  2018-01-22 13:16:54  3   1    javascript/ jquery/ html/ css/ safari

问题描述

我有一个子菜单，显示用户将鼠标悬停在主菜单项上的时间。 在Safari（我的版本为10.0.1）以外的所有浏览器中，它都可以正常运行。

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

这是Chrome上的预期行为：Chrome上的“ 工作”菜单

这是Safari 上的结果： 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

});

1 个解决方案

解决方案1
 0 已采纳  2018-01-22 13:29:27

您没有在.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. 
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Div曲面弯曲且溢出：隐藏在Chrome和Safari中 iOS 6：Safari溢出：隐藏在包含div上，当模态打开时不工作 隐藏的div没有显示出焦点 Safari不会让我全屏显示隐藏了溢出的弹出窗口 使用TextGeometry（Three.js）无法正确呈现文本 溢出：在Safari中隐藏跳转到顶部 如果div被溢出隐藏，则滚动 隐藏输入字段的内联Javascript无法正常运行 如何确保背景div在隐藏之前不可见？ 在提交时显示隐藏的Div，但表格无效
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM