mobile menu open & close buttons display in Chrome but not Safari-CodePudding

Our mobile menu works fine in Chrome & Firefox on a Pixel 5.

On an iPhone 5s (the only iPhone I have), an iPad Mini 2 and on an older iPad, the burger menu open & close icons do not show.

On a non-retina desktop display where Chrome & Firefox work in responsive mode (mobile viewport width), Safari will show the mobile menu open icon, but not the close icon.

The open icon is three pipes rotated 90deg: |||

The close icon is a font-awesome symbol:

.exo-menu.display a.toggle-menu::before {
    display: block !important;
    font-family: 'Font Awesome\ 5 Free';
    content: '\f00d';

I've tried adding font-weight: 900; without change.

Using Safari mobile inspector, the element is in the correct position.

You can use the code below in a mobile viewport or see the problem in the wild @ https://mandoedev.wpengine.com.

How can I get the mobile menu open & close icons working in Safari the same way they work in Chrome & Firefox on a Pixel 5?

Help appreciated.

EDIT: pso's answer finds the cause of the problem, but not the solution. Would really appreciate someone helping me with the solution.

$(document).ready(function() {
    $(".mega-drop-down").hover(function() {
        if (window.innerWidth > 768) {
        showMenu(this);
        }
    });

    $(".mega-drop-down").on("click", function() {
        if (window.innerWidth <= 768) {
          showMenu(this);
          this.scrollIntoView(true);  // <---- fix
        }
    });
    $(".toggle-menu").click(function() {
        $("#mm-logo").toggleClass("fixed");
        $(".exo-menu").toggleClass("display");
        $("#mm-button-group").toggle();
        $(".mega-menu").addClass("hide-block");
    });
});

function showMenu(self) {
    $(".mega-menu")
        .not($(self).children(".mega-menu").toggleClass("hide-block"))
        .addClass("hide-block");
    $(self).find("a span").toggleClass("hover");
    $(".exo-menu")
        .find("a span")
        .not($(self).find("a span"))
        .removeClass("hover");
}

.fl-builder-content[data-type="header"].fl-theme-builder-header-sticky {
    z-index: 1000;
}

ul.exo-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.cabeza,
ul.manos,
ul.corporal {
    list-style-type: none;
    padding: 0;
}

.content {
    margin: 50px 100px 0px 100px;
}

.mega-menu-wrap .row {
    margin-right: 0;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
}

.exo-menu {
    float: none;
    margin: auto;
    list-style: none;
    position: relative;
}

.exo-menu>li {
    display: inline-block;
    float: left;
    position: relative;
}

.exo-menu>li>a {
    color: black;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.exo-menu>li>a:hover {
    color: #23ADF8;
}

.exo-menu i {
    float: left;
    font-size: 18px;
    margin-right: 6px;
    line-height: 20px !important;
}

li.drop-down,
.flyout-right,
.flyout-left {
    position: relative;
}

li.drop-down:before {
    content: "f103";
    color: #fff;
    font-family: FontAwesome;
    font-style: normal;
    display: inline;
    position: absolute;
    right: 6px;
    top: 20px;
    font-size: 14px;
}

li.drop-down>ul {
    left: 0px;
    min-width: 230px;
}

.drop-down-ul {
    display: none;
}

h4.row.mega-title {
    margin-top: 0px;
    font-size: 15px;
    padding-bottom: 13px;
}

.animated.fadeIn.mega-menu {
    margin-top: 8px;
}

.mega-menu {
    left: 0;
    right: 0;
    width: 100vw;
    /*display: none;*/
    position: fixed;
    padding-top: 0;
    /*padding-top: 10px;*/
}

.mega-menu-wrap {
    background-color: white;
}

.mm-mega-menu-wrap {
    box-shadow: 3px 3px 10px 0 rgb(206 206 206 / 51%);
}

h4.row.mega-title {
    color: #838383;
    margin-top: 0px;
    font-size: 15px;
    padding-bottom: 13px;
    padding-top: 23px;
}

.mega-menu ul li a {
    line-height: 25px;
    font-size: 15px;
    color: black;
    font-weight: 600;
    display: block;
}

ul.stander li a {
    padding: 3px 0px;
}

ul.description li {
    padding-bottom: 12px;
    line-height: 8px;
}

ul.description li span {
    color: #ccc;
    font-size: 85%;
}

a.view-more {
    border-radius: 1px;
    margin-top: 15px;
    background-color: #009FE1;
    padding: 2px 10px !important;
    line-height: 21px !important;
    display: inline-block !important;
}

a.view-more:hover {
    color: #fff;
    background: #0DADEF;
}

ul.icon-des li a i {
    color: #fff;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    text-align: center;
    background-color: #009FE1;
    line-height: 35px !important;
}

ul.icon-des li {
    width: 100%;
    display: table;
    margin-bottom: 11px;
}


/*Blog DropDown*/

.Blog {
    left: 0;
    display: none;
    color: #fefefe;
    padding-top: 15px;
    background: #547787;
    padding-bottom: 15px;
}

.Blog .blog-title {
    color: #fff;
    font-size: 15px;
    text-transform: uppercase;
}

.Blog .blog-des {
    color: #ccc;
    font-size: 90%;
    margin-top: 15px;
}

.Blog a.view-more {
    margin-top: 0px;
}


/*Images*/

.Images {
    left: 0;
    width: 100%;
    display: none;
    color: #fefefe;
    padding-top: 15px;
    background: #547787;
    padding-bottom: 15px;
}

.Images h4 {
    font-size: 15px;
    margin-top: 0px;
    text-transform: uppercase;
}


/*common*/

.flyout-right ul>li>a,
.flyout-left ul>li>a,
.flyout-mega-wrap {
    background-color: white;
}


/*hover*/

.Blog:hover,
.Images:hover,
.mega-menu:hover,
.drop-down-ul:hover,
li.flyout-left>ul:hover,
li.flyout-right>ul:hover,
.flyout-mega-wrap:hover,
li.flyout-left a:hover ul,
li.flyout-right a:hover ul,
.blog-drop-down>a:hover .Blog,
li.drop-down>a:hover .drop-down-ul,
.images-drop-down>a:hover .Images,
.mega-drop-down a:hover .mega-menu,
li.flyout-mega>a:hover .flyout-mega-wrap {
    display: block;
}

a.toggle-menu {
    position: absolute;
    right: 10px;
    padding: 8px 20px;
    font-size: 27px;
    color: black;
    top: 0px;
    transform: rotate(90deg);
    margin-top: -13px;
}

.fl-node-5dafd29034e78 {
    z-index: 210 !important;
    position: relative;
}

.megamenusip,
.mega-menu,
.Images,
.Blog,
.flyout-right>ul,
.flyout-left>ul,
li.drop-down>ul {
    z-index: 200;
}

.circle_image02 {
    opacity: 1.0 !important;
    filter: alpha(opacity=50) !important;
    /* For IE8 and earlier */
}

.circle_image02:hover {
    opacity: 0.5 !important;
    filter: alpha(opacity=100) !important;
    /* For IE8 and earlier */
}

.mega-menu-wrap li {
    margin-bottom: 22px;
    padding-right: 30px;
}

.mm-mm-icon {
    vertical-align: top;
    margin-right: 14px;
    width: 32;
    height: 32;
}

.mm-mm-subtext {
    display: inline-block;
    margin-left: 46px;
    font-size: 13px;
}

.mega-drop-down>a>span::after {
    font-family: 'Font Awesome\ 5 Free';
    content: '\f107';
    padding-left: 5px;
}

.mega-drop-down>a>span.hover::after {
    font-family: 'Font Awesome\ 5 Free';
    content: '\f106';
}

.mega-drop-down>a>span.hover,
.mega-drop-down>a:active {
    color: #23ADF8;
}

.mm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.mm-grid div:nth-of-type(2) {
    padding: 10px 10px 10px 35px;
}

.mm-mm-video {
    display: inline-block;
    background-color: white;
    border: 2px solid #EDEDED;
    margin-top: 17px;
    padding: 13px;
    border-radius: 24px;
    height: 47px;
    width: 161px;
}

.mm-mm-video:hover {
    background-color: #23ADF8;
    border-color: #23ADF8;
}

.mm-mm-video a {
    color: #23ADF8;
}

.mm-mm-video:hover a {
    color: white;
}

.mm-mm-video:hover img {
    filter: invert(42%) brightness(180%) contrast(180%);
}

.mega-drop-down a:hover .mega-menu.hide-block {
    display: none;
}

.mm-mm-flyout {
    display: inline-block;
    width: 100%;
    font-size: 15px;
}

.animated.mega-menu {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
}

.mega-menu ul li a:hover {
    color: #23ADF8;
}

.container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.mm-grid {
    width: 400px;
    max-width: 100%;
}

h4.row.mega-title {
    padding-left: 0;
}

.row .col-md-2,
.row .col-md-3,
.row .col-md-4 {
    padding-left: 0;
    padding-right: 0;
}

@media (min-width: 1349px) {
    .fl-node-5dafd29034e79 {
        width: 16%;
    }

    .fl-node-g84bp2nweskf {
        width: 3%;
    }
}

@media (min-width: 1300px) {
    .mega-menu-wrap {
        width: 1280px;
        margin: auto;
    }
}

@media (max-width: 1299px) {
    .mega-menu-wrap {
        width: 100%;
    }
}

@media (min-width: 1252px) {
    .exo-menu>li>a {
        display: block;
        padding: 30px 22px 32px;
    }
}

@media (max-width: 1251px) {
    .exo-menu>li>a {
        padding: 30px 15px 32px;
    }
}

@media (min-width: 769px) and (max-width: 1251px) {
    .animated.fadeIn.mega-menu {
        padding-top: 32px;
    }
}

@media (max-width: 1199px) {
    .mega-menu {
        width: 100vw;
    }
}

@media (max-width: 1151px) {
    .fl-col-group-equal-height .fl-col.fl-node-5dafd77b08a6a {
        display: none;
    }
}

@media (max-width: 1025px) {
    .fl-col-group-equal-height .fl-col.fl-node-5e6078af59549 {
        display: none;
    }
}

@media (min-width: 992px) {
    .exo-menu>li:nth-child(1)>a {
        padding-left: 0;
    }

    .col-md-2 {
        width: 16.66666667%;
        float: left;
    }

    .col-md-3 {
        width: 25%;
        float: left;
        padding-left: 0;
    }

    .col-md-4 {
        width: 33.33333333%;
        float: left;
    }
}

@media (max-width: 991px) {
    .empty {
        display: none;
    }
}

@media (min-width: 789px) and (max-width: 800px) {
    .exo-menu>li>a {
        padding: 30px 12px 32px;
    }
}

@media (min-width: 769px) {
    .mm-grid {
        margin-bottom: 27px;
    }

    #mm-button-group {
        display: none !important;
    }
}

@media (min-width: 768px) {

    .mega-menu,
    .flyout-mega-wrap,
    .Images,
    .Blog,
    .flyout-right>ul,
    .flyout-left>ul,
    li.drop-down>ul {
        position: fixed;
        margin-top: 0;
    }

    .flyout-right>ul {
        left: 100%;
    }

    .flyout-left>ul {
        right: 100%;
    }

    .mega-menu-wrap .row {
        margin-right: 0;
        margin-left: 0;
        padding: 0 15px;
    }
}

.mega-menu.hide-block {
    display: none !important;
}

@media (max-width: 768px) {
    #mm-logo {
        position: fixed;
        top: 0;
        left: 0;
        background-color: white;
        padding-left: 23px;
    }

    #mm-logo.fixed {
        position: fixed;
        top: 0;
        background: white;
        /*left: 23px;*/
        z-index: 55;
    }

    .admin-bar #mm-logo {
        position: fixed;
        top: 46px;
    }

    .fl-page header.fl-builder-content {
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    }

    .fl-builder-content .fl-node-5dafd29034e79 {
        width: calc(100vw - 130px) !important;
    }

    .fl-builder-content .fl-node-5dafd29034e7a {
        width: 130px !important;
    }

    .fl-builder-content .fl-node-g84bp2nweskf {
        display: none;
    }

    .fl-module.fl-module-html.fl-node-3p7sb46cwvqu {
        position: absolute;
        top: 20px;
    }

    .fl-node-5dafd2ede7f58>.fl-module-content {
        margin-left: 0;
    }

    .exo-menu {
        min-height: 58px;
        width: 100%;
    }

    .mega-menu {
        padding: 15px;
    }

    .animated.mega-menu {
        padding-left: 22px;
        padding-right: 22px;
        margin-left: -22px;
        margin-right: -22px;
    }

    .animated.fadeIn.mega-menu {
        z-index: 0;
    }

    .mm-mega-menu-wrap {
        box-shadow: none;
    }

    .mega-menu-wrap {
        background-color: transparent;
    }

    ul.exo-menu.display {
        left: 0;
        top: 0px;
        position: relative;
        display: flex;
        flex: 1;
        flex-direction: column;
        background-color: white;
        min-height: calc((100 * var(--vh)) - 210px);
        z-index: 0;
    }

    .admin-bar ul.exo-menu.display {
        min-height: calc(100vh - 256px);
    }

    a.toggle-menu {
        position: fixed;
        right: 0;
        padding: 8px 20px;
        font-size: 27px;
        color: black;
        top: 14px;
        transform: rotate(90deg);
    }
    
    .admin-bar a.toggle-menu {
        top: 58px;
    }

    .mega-drop-down,
    .bg-white {
        background-color: white;
    }

    .mega-drop-down>a>span::after {
        float: right;
        padding-right: 6px;
    }

    .exo-menu.display a.toggle-menu span {
        display: none;
    }

    .exo-menu.display a.toggle-menu {
        position: fixed;
        right: 2px;
        padding: 4px 22px;
        font-size: 27px;
        z-index: 55;
        color: #212121;
    }

    .exo-menu.display a.toggle-menu:hover,
    a.toggle-menu:hover {
        color: #212121;
    }

    .exo-menu.display a.toggle-menu::before {
        display: block !important;
        font-family: 'Font Awesome\ 5 Free';
        content: '\f00d';
        transform: rotate(90deg);
        color: #B2B2B2;
        font-weight: 900;
        margin-top: 10px;
        margin-right: -10px;
    }

    .exo-menu>li>a {
        display: none;
        padding: 30px 8px 32px;
    }

    .exo-menu>li {
        margin-left: auto;
        margin-right: auto;
        border-bottom: 1px solid #EDEDED;
    }

    .exo-menu>li.mm-li-button {
        border-bottom: none;
    }

    .display.exo-menu>li {
        width: calc(100vw - 44px);
        display: block;
        float: none;
    }

    .display.exo-menu>li>a {
        display: block;
        padding: 20px 0;
        font-size: 24px;
    }

    .mega-menu,
    .Images,
    .Blog,
    .flyout-right>ul,
    .flyout-left>ul,
    li.drop-down>ul {
        position: relative;
    }

    .mega-menu {
        background-color: #F8F8F8;
    }

    #menu-item-1225 {
        margin-top: -5px;
    }

    .fl-builder-content .fl-node-5dafd29034e7a {
        width: 40px !important;
    }

    #see-all-features {
        content: url('https://mandoedev.wpengine.com/wp-content/uploads/2022/02/what-is-digital-signage-mobile.jpg');
    }

    #just-4-steps {
        content: url('https://mandoedev.wpengine.com/wp-content/uploads/2022/02/Just-4-steps-to-get-digital-signage-for-your-business-mobile.jpg');
    }

    #mm-button-group {
        display: none;
    }

    #mm-button-group .mm-mm-button a.fl-button {
        font-family: Poppins, sans-serif;
        font-weight: 600;
        font-size: 16px;
        border: 1px solid #23ADF8 !important;
        background-color: white !important;
        background-clip: border-box;
        border-top-width: 2px;
        border-right-width: 2px;
        border-bottom-width: 2px;
        border-left-width: 2px;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
        width: 100%;
        text-align: center;
        /*margin: 10px 0;*/
    }

    .fl-page #mm-mm-button-2 .mm-mm-button a.fl-button {
        border: 1px solid #EDEDED !important;
    }

    .fl-page .mm-mm-button a.fl-button span {
        color: #23ADF8 !important;
    }

    #mm-button-group {
        position: relative;
        /*bottom: 5px;*/
        list-style-type: none;
        padding-left: 0;
        width: 100%;
        background-color: white;
        padding: 10px 22px 20px 22px;
        /*margin-bottom: 22px;*/
    }

    #mm-button-group li {
        padding: 10px 0 0 0;
        background-color: white;
    }

    .container-fluid.megamenusip {
        display: flex;
        flex-wrap: wrap;
        top: 66px;
        position: fixed;
        left: 0;
        width: 100vw;
        height: calc(100% - 56px);
        padding-left: 0;
        padding-right: 0;
        justify-content: stretch;
        overflow-y: scroll;
    }

    header .fl-col-group.fl-col-group-equal-height.fl-col-group-custom-width {
        display: -webkit-box;
        display: -webkit-flex;
        background: white;
        position: fixed;
        display: -ms-flexbox;
        display: flex;
    }

    h4.row.mega-title {
        padding-top: 11px;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div >
  <div >
    <ul >
      <li ><a href="#"><span>Product</span></a>
        <div >
          <div >
            <div >
              <div >
                <div >
                  <h4 >Instant Digital Signage Platform</h4>
                  <ul >
                    <li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-features.svg" alt="features"  />Features</a> <span >See all the features packed into this powerful digital signage platform.</span></li>
                    <li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-templates.svg" alt="templates"  />Templates</a> <span >1000’s of professionally designed templates for every business.</span></li>
                  </ul>
                </div>
                <div >
                  <h4 >&nbsp;</h4>
                  <ul >
                    <li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-how-it-works.svg" alt="templates"  />How it Works</a> <span >Find out how easy it is to get digital signage for your business.</span></li>
                    <li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-industries.svg" alt="templates"  />Industries</a> <span >Digital signage is perfect for any business with tailored solutions.</span></li>
                  </ul>
                </div>
                <div >
                  <h4 >Get the Player</h4>
                  <ul >
                    <li><a href="#">Hardware</a></li>
                    <li><a href="#">Player Software</a></li>
                  </ul>
                </div>
                <div >
                  <h4 >What is Instant Digital Signage?</h4>
                  <div >
                    <div><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/what-is-digital-signage.jpg" alt="What is Instant Digital Signage?" style="width: 100%;" id="see-all-features"/></div>
                    <div><span > Get an overview of how easy it is to get digital signage</span><br />
                      <button >
                      <a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-play.svg" alt="play video" title="play video"> Play Video</a>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li ><a href="#"><span>Solutions</span></a>
        <div >
          <div >
            <div >
              <div >
                <div >
                  <h4 >Industries</h4>
                  <ul >
                    <li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-hospitality.svg" alt="features"  />Hospitality</a> <span >Cafe, Restaurant, Fast Food…</span></li>
                    <li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-retail.svg" alt="templates"  />Retail</a> <span >Cafe, Restaurant, Fast Food…</span></li>
                    <li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-hair-beauty.svg" alt="templates"  />Hair &amp; Beauty</a> <span >Hair Salons, Nail Salon, Laser…</span></li>
                  </ul>
                </div>
                <div >
                  <h4 >&nbsp;</h4>
                  <ul >
                    <li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-medical.svg" alt="features"  />Medical</a> <span >Cafe, Restaurant, Fast Food…</span></li>
                    <li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-fitness.svg" alt="templates"  />Fitness</a> <span >Cafe, Restaurant, Fast Food…</span></li>
                    <li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-more.svg" alt="templates"  />More</a> <span >We have solutions for all industries…</span></li>
                  </ul>
                </div>
                <div >
                  <h4 >Use Cases</h4>
                  <ul >
                    <li><a href="#">Digital Menu Boards</a></li>
                    <li><a href="#">Window Signage</a></li>
                    <li><a href="#">In-Store Signage</a></li>
                  </ul>
                </div>
                <div >
                  <h4 >About Mandoe</h4>
                  <ul >
                    <li><a href="#">Enterprise</a></li>
                    <li><a href="#">Customers</a></li>
                    <li><a href="#">Partner Program</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li ><a href="#"><span>Resources</span></a>
        <div >
          <div >
            <div >
              <div >
                <div >
                  <h4 >Learn about the product</h4>
                  <ul >
                  </ul>
                </div>
                <div >
                  <h4 >&nbsp;</h4>
                  <ul >
                    <li></li>
                  </ul>
                </div>
                <div >
                  <h4 >Get in Touch</h4>
                  <ul >
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Support</a></li>
                  </ul>
                </div>
                <div >
                  <h4 >Learn how it works</h4>
                  <div >
                    <div></div>
                    <div></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li ><a href="/pricing/software-only-pricing/">Pricing</a></li>
      <a href="#" ><span>|||</span></a>
    </ul>
    <ul id="mm-button-group">
      <li  id="mm-mm-button-1">
      </li>
      <li  id="mm-mm-button-2">
          <div >
            <a href="https://activate.mandoemedia.com" target="_self"  role="button">
                            <span >Log In</span>
                    </a>
            </div>
      </li>  
    </ul>
  </div>
</div>

CodePudding user response：

The property overflow-y: scroll in your div container with the classes container-fluid megamenusip messes with your pseudo element. The content itself has nothing to do with it.

CodePudding user response：

Please try this css in your code

.exo-menu.display a.toggle-menu::before {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: 'Font Awesome\ 5 Free';
    content: '\f00d';
}

CodePudding user response：

container-fluid-megamenusip in this class just remove overflow-y: scroll Propert