Div在safari中显得透明

Question

我一直在几个不同的浏览器中测试我的网站，并注意到在safari中，应该滑动打开以显示设置菜单的div显示为透明。当光标悬停在菜单中的链接上时光标仍然成为指针，它们仍然可以被点击，并且在检查器中，它显示具有适当尺寸的菜单，但是无处可见。知道是什么原因引起的吗？这是关于菜单的php / html / css / jquery。

    <?php 
    if($profile_id === $_SESSION['user_id']) {
        echo '<div id="profile_settings">
                <ul class="settings_list">
                    <li class="bold"><a href="loggout.php">Sign out</a></li>
                    <li class="bold" id="edit_profile">Edit profile</li>
                    <li id="mid"><a href="settings.php">Settings</a></li>
                    <li><a href="help.php">Help</a></li>
                </ul>
                <div id="menu_line"></div>
            </div>

            <div id="profile_settings_button">
                <div id="profile_settings_click"></div>
            </div>';
    } else {

    }
?>

<style>
#profile_settings {
    height: 100px;
    border-bottom: 10px solid #FAFAFA;
    border-top: 10px solid #FAFAFA;
    position: fixed;
    width: 0;
    top: 33px;
    right: 25px;
    background-color: rgba(210, 213, 214, 0.98);
    overflow: hidden;
    display: block;
    opacity: 1;

    z-index: 12;

    -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;

    -webkit-box-shadow: inset 10px 0px 0px 0px rgba(250,250,250,1);
    -moz-box-shadow: inset 10px 0px 0px 0px rgba(250,250,250,1);
    box-shadow: inset 10px 0px 0px 0px rgba(250,250,250,1);
}

#profile_settings_click {
    height: 30px;
    width: 30px;
    background-image: url(images/icons/cog.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    position: absolute;
    top: 50%;
    margin-top: -15px;
    cursor: pointer;
    right: 20px;
}
</style>


 <script type="text/javascript">
    $('document').ready(function(){
        var countt = 0;
        var isMouse = false;
        var isOpen = false;
    if(isOpen === false) {
        $('#profile_settings_click').click(function(){
            $('.profile_pic_wrap').css("right", "145px");
            $('#profile_settings').css("width", "120px");
        });
    } else if(isOpen === true) {
        $('.profile_pic_wrap').css("right", "25px");
        $('#profile_settings').css("width", "0");
    }


        $("#profile_settings_button, #profile_settings").mouseenter(function(){
            countt++;
        });

        $("#profile_settings_button, #profile_settings").mouseleave(function(){
            countt--;
            setTimeout(function(){
                if (countt==0){
                    $('.profile_pic_wrap').css("right", "25px");
                    $('#profile_settings').css("width", "0");
                }
            },700);

        });

    });
</script>

不幸的是，我还没有足够的代表发布图片，但希望我的描述就足够了。谢谢！