• De afgelopen dagen zijn er meerdere fora waarop bestaande accounts worden overgenomen door spammers. De gebruikersnamen en wachtwoorden zijn via een hack of een lek via andere sites buitgemaakt. Via have i been pwned? kan je controleren of jouw gegeven ook zijn buitgemaakt. Wijzig bij twijfel jouw wachtwoord of schakel de twee-staps-verificatie in.

Opgelost Dropdown werkt niet in Safari

Status
Niet open voor verdere reacties.

Erick

Gewaardeerd
Lid geworden
17 mei 2007
Berichten
1.359
Waarderingsscore
3
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!
 
Je zal echt een deel van de code (in elk geval van het menu) moeten aanleveren willen we je kunnen helpen.
 
Je hebt helemaal gelijk, Rubensky. :)
[CODE lang="css" title="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 */
[/CODE]


[CODE lang="html" title="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 --> [/CODE]
 
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?
 
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.
 
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.
 
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.
 
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.
 
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.
 
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.
 
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.
 
Het probleem lijkt zich te hebben opgelost, al weet ik niet precies hoe. Gevalletje cache misschien?

Bedankt voor het meedenken!
 
Mooi dat het is opgelost, ik zal dit topic dan ook op opgelost zetten.
 
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.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan