Opgelost Dropdown werkt niet in Safari

Erick

Gewaardeerd
Lid geworden
17 mei 2007
Berichten
1.243
Reaction score
0
Punten
36
In mijn website maak ik voor de tabletversie en de mobiele versie van een dropdownmenu dat zich schermvullend over de content uitrolt. Dit werkt in alle browsers, behalve in Safari.

Iemand die daar eens naar zou kunnen kijken en/of een idee heeft waar het aan kan liggen?

Klik hier voor de website. (Maak de browser zo smal als mogelijk.)

Bedankt alvast!
 

Rubensky

Moderator
Team lid
Lid geworden
17 okt 2011
Berichten
19.374
Reaction score
127
Punten
63
Je zal echt een deel van de code (in elk geval van het menu) moeten aanleveren willen we je kunnen helpen.
 

Erick

Gewaardeerd
Lid geworden
17 mei 2007
Berichten
1.243
Reaction score
0
Punten
36
Je hebt helemaal gelijk, Rubensky. :)
CSS:
/* Menu theme-title */
.menu-theme-title {margin: 0 auto; width: 100%;}


/* Menu-navigation */
/* Switch button menu */
.button-menu {cursor: pointer; height: 25px; margin-top: 10px; position: relative; width: 25px; z-index: 9000; -webkit-transition: opacity .25s ease; transition: opacity .25s ease;}
.button-menu:hover {opacity: 1;}

/* Hamburger */

.button-menu span {background: #c6c6c6; border: none; cursor: pointer; height: 4px; left: 0; position: absolute; width: 100%;  -webkit-transition: all .35s ease; transition: all .35s ease;}
 
/* Hamburger lijnen */ 
.button-menu span:nth-of-type(1) {top: 0px;}
.button-menu span:nth-of-type(2) {top: 11px;}
.button-menu span:nth-of-type(3) {top: 22px;}

/* Switch van hamburger/kruisje - per lijn */
.button-menu.active .top {
  -webkit-transform: translateY(11px) translateX(0) rotate(45deg);
  -ms-transform: translateY(11px) translateX(0) rotate(45deg);
  transform: translateY(11px) translateX(0) rotate(45deg);
  background: #FFF;
}

.button-menu.active .middle {
  opacity: 0;
  background: #FFF;
}

.button-menu.active .bottom {
  -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
  -ms-transform: translateY(-11px) translateX(0) rotate(-45deg);
  transform: translateY(-11px) translateX(0) rotate(-45deg);
  background: #FFF;
}


/* Overlay (niet zichtbaar) */
.overlay {background-color: rgba(17, 58, 89, 0.9); height: 0%; left: 0; opacity: 0; overflow: hidden; position: fixed; top: 0; visibility: hidden; width: 100%;
              -webkit-transition: opacity .35s, visibility .35s, height .35s;
              transition: opacity .35s, visibility .35s, height .35s;
}
/* Overlay (zichtbaar) */
.overlay.open {height: 100%; opacity: 1; visibility: visible; z-index: 8000;}    /* Z-index moet lager zijn dan die van de .button-menu */

/* overlay menu-items effect bij openen */
.overlay.open li {
-webkit-animation: fadeInRight .5s ease forwards;
animation: fadeInRight .5s ease forwards;
-webkit-animation-delay: .35s;
animation-delay: .35s;
}

.overlay nav {position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
/* Top: lijnt menu al verticaal in het midden uit */


/* Menu-navigation */
.main-navigation ul {list-style: none; margin: 0 auto; padding: 0; width: 85%;}
.main-navigation ul li {font-size: 2rem; padding: 1em; text-align: center; width: calc(100%-2em); }
.main-navigation ul li a {color: #ffffff;}
.main-navigation ul li:hover{background-color: rgba(0, 0, 0, 0.1);} /* Zwart met opacity */

HMTL:
                    <div class="menu-navigation">
    
                            <!-- Switch button hamburger/kruis -->
                            <div class="button-menu" id="toggle">
                                <span class="top"></span>
                                <span class="middle"></span>
                                <span class="bottom"></span>
                            </div><!-- /.button-menu -->
    
      
                            <div class="overlay" id="overlay">
    
                                    <nav id="site-navigation" class="main-navigation">
                                    
                                    <?php
                                    wp_nav_menu( array(
                                        'theme_location' => 'menu-1',
                                        'menu_id'        => 'primary-menu',
                                    ) );
                                    ?>
                                </nav><!-- #site-navigation -->
            
                            </div><!-- /.overlay -->
  
                    </div><!-- /.menu-navigation -->
 

Erick

Gewaardeerd
Lid geworden
17 mei 2007
Berichten
1.243
Reaction score
0
Punten
36
Ik heb het idee dat het menu wegvalt achter de onderliggende content. Moet ik dan met de z-index aan de slag? En aan welk element moet ik dan koppelen? De div waar het menu in staat of moet ik het hogerop zoeken?
 

maulem

Gevestigd lid
Lid geworden
23 feb 2017
Berichten
372
Reaction score
10
Punten
18
De z-index van de overlay is op dit moment hoger dan die van het menu dus het menu zal wel wegvallen achter de overlay, temeer omdat de overlay een opacity (bedekking) van 1 heeft. De bedoeling is natuurlijk dat de overlay de achtergrond bedekt terwijl het menu verschijnt, vandaar de opacity van 1.

Als het menu over de overlay heen zichtbaar moet zijn zul je waarschijnlijk de z-index van het menu moeten verhogen. Dat geldt dan met name voor het nav element.
 

Erick

Gewaardeerd
Lid geworden
17 mei 2007
Berichten
1.243
Reaction score
0
Punten
36
Is er een verschil tussen Safari als browser op de iPhone en op een iPad? Na wat sleutelen lukt het me om het menu werkend te krijgen op de tablet, maar mobiel blijft het menu achter de content vallen.
 

Aarie25

Moderator
Team lid
Lid geworden
12 apr 2013
Berichten
20.318
Reaction score
327
Punten
83
Leeftijd
39
Locatie
Gelderland
Is er een verschil tussen Safari als browser op de iPhone en op een iPad? Na wat sleutelen lukt het me om het menu werkend te krijgen op de tablet, maar mobiel blijft het menu achter de content vallen.
Ik zou zeggen dat die precies het zelfde zijn.
Je zou eens naar de versie nummers kunnen kijken, dan weet je het zeker.
 

maulem

Gevestigd lid
Lid geworden
23 feb 2017
Berichten
372
Reaction score
10
Punten
18
Z-index schijnt niet te werken zonder expliciete positioning. Als de z-index wordt ingesteld voor elementen waarvoor niet expliciet een absolute/relative/fixed position is gezet, werkt de z-index niet.
 

Erick

Gewaardeerd
Lid geworden
17 mei 2007
Berichten
1.243
Reaction score
0
Punten
36
Dus de elementen waar nu de z-index aan gekoppeld is, zouden dus een position: relative moeten krijgen, Maulem?

Het is wel vreemd dat het inmiddels overal werkt (er stond nog ergens een overflow-x: hidden in de css), behalve in de mobiele versies van Safari.
 

maulem

Gevestigd lid
Lid geworden
23 feb 2017
Berichten
372
Reaction score
10
Punten
18
Heb je dan geen z-index hoeven zetten voor het menu om het bovenop te krijgen?

Voor het menu zou inderdaad moeten gaan gelden position: relative.
 

Erick

Gewaardeerd
Lid geworden
17 mei 2007
Berichten
1.243
Reaction score
0
Punten
36
Nee, het weghalen van die overflox was voldoende voor Safari op de tablets, mobiel dus niet.

@Aarie25 De Een collega van me heeft gecheckt (want die is helemaal into Apple), maar die had overal dezelfde versie en toch werkte het mobiel niet.
 

Erick

Gewaardeerd
Lid geworden
17 mei 2007
Berichten
1.243
Reaction score
0
Punten
36
Het probleem lijkt zich te hebben opgelost, al weet ik niet precies hoe. Gevalletje cache misschien?

Bedankt voor het meedenken!
 

Aarie25

Moderator
Team lid
Lid geworden
12 apr 2013
Berichten
20.318
Reaction score
327
Punten
83
Leeftijd
39
Locatie
Gelderland
Mooi dat het is opgelost, ik zal dit topic dan ook op opgelost zetten.
 

maulem

Gevestigd lid
Lid geworden
23 feb 2017
Berichten
372
Reaction score
10
Punten
18
Ik zag een zeer aardige uitleg over stacking en de z-index, mocht je daar nog iets over willen weten:

Z-Index Explained: How to Stack Elements Using CSS

Zo wordt er uitgelegd dat geneste (child) elementen zonder z-index maar met positionaanduiding altijd boven op de parent div verschijnen, waardoor ze dus eigenlijk niets met de z-index van de parent div te maken hebben.

Geneste elementen kunnen dus ook een lagere z-index dan de parent div hebben, dan verschijnen ze nog steeds boven op de parent div.
 

Nieuwste berichten

Bovenaan Onderaan