I'm using a series of drop-down buttons with an internal menu in a personal project, the problem is that when opening these buttons from a browser on an Apple device (we tested with Safari and Chrome and both fail) when You click on these links, the focus does not run and the animations are not launched nor does the menu open.
You can see an example here link
body {
margin: 0;
font-family: 'Open Sans', sans-serif;
}
[class*="fab"] {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(255,255,255,0);
-webkit-tap-highlight-color: transparent;
}
.fab-shadow {
width: 0;
height: 100%;
background: rgba(0,0,0,0.3);
opacity: 0;
position: fixed;
top: 0;
left: 0;
z-index: 400;
transition: opacity 0.5s, width 0s 0.5s;
}
.fab-button {
width: 64px;
height: 64px;
border-radius: 100%;
margin: 16px;
display: table;
background: #2196f3;
box-shadow: 0 2px 6px rgba(0,0,0,0.5);
position: relative;
transition: box-shadow 0.2s;
}
.fab-button.red {
background: #f44336;
}
.fab-button.pink {
background: #e91e63;
}
.fab-button:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.fab-button:focus {
z-index: 450;
pointer-events: none;
}
.fab-button:focus ~ .fab-shadow {
width: 100%;
opacity: 1;
transition: opacity 0.5s, width 0s;
}
.fab-button div {
width: 6px;
height: 6px;
background: #fff;
margin: 29px;
border-radius: 100%;
box-shadow: 0 -11px #fff, 0 11px #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
transition: all 0.5s cubic-bezier(0.5, 2, 0.5, 1);
}
.fab-button:focus .dot {
width: 4px;
height: 4px;
margin: 30px;
border-radius: 0;
box-shadow: 0 0 #fff, 0 0 #fff, 0 -3px #fff, 0 3px #fff, -3px 0 #fff, 3px 0 #fff, 0 -6px #fff, 0 6px #fff, -6px 0 #fff, 6px 0 #fff, 0 -9px #fff, 0 9px #fff, -9px 0 #fff, 9px 0 #fff, 0 -12px #fff, 0 12px #fff, -12px 0 #fff, 12px 0 #fff;
transform: rotate(45deg);
}
.fab-button .plus {
width: 4px;
height: 4px;
margin: 30px;
border-radius: 0;
box-shadow: 0 0 #fff, 0 0 #fff, 0 -3px #fff, 0 3px #fff, -3px 0 #fff, 3px 0 #fff, 0 -6px #fff, 0 6px #fff, -6px 0 #fff, 6px 0 #fff, 0 -9px #fff, 0 9px #fff, -9px 0 #fff, 9px 0 #fff, 0 -12px #fff, 0 12px #fff, -12px 0 #fff, 12px 0 #fff;
}
.fab-button:focus .plus {
transform: rotate(45deg);
}
.fab-button .menu {
width: 4px;
height: 4px;
margin: 30px;
border-radius: 0;
box-shadow: -12px -9px #fff, -9px -9px #fff, -6px -9px #fff, -3px -9px #fff, 0 -9px #fff, 3px -9px #fff, 6px -9px #fff, 9px -9px #fff, 12px -9px #fff, -12px 0 #fff, -9px 0 #fff, -6px 0 #fff, -3px 0 #fff, 0 0 #fff, 3px 0 #fff, 6px 0 #fff, 9px 0 #fff, 12px 0 #fff, -12px 9px #fff, -9px 9px #fff, -6px 9px #fff, -3px 9px #fff, 0 9px #fff, 3px 9px #fff, 6px 9px #fff, 9px 9px #fff, 12px 9px #fff;
}
.fab-button:focus .menu {
box-shadow: 0 -12px #fff, 0 -9px #fff, 0 -6px #fff, 0 -3px #fff, 0 0 #fff, 0 -3px #fff, 0 -6px #fff, 0 -9px #fff, 0 -12px #fff, -12px 0 #fff, -9px 0 #fff, -6px 0 #fff, -3px 0 #fff, 0 0 #fff, 3px 0 #fff, 6px 0 #fff, 9px 0 #fff, 12px 0 #fff, 0 12px #fff, 0 9px #fff, 0 6px #fff, 0 3px #fff, 0 0 #fff, 0 3px #fff, 0 6px #fff, 0 9px #fff, 0 12px #fff;
transform: rotate(45deg);
}
.fab-button:focus + .fab-options,
.fab-options:active {
width: auto;
overflow: initial;
}
.fab-options {
position: absolute;
width: 0;
overflow: hidden;
z-index: 500;
margin: -8px 0 0 20px;
}
.fab-options .fab-option {
display: table;
color: #fff;
margin: 8px;
text-decoration: none !important;
}
.fab-options .fab-option * {
box-shadow: 0 2px 6px rgba(0,0,0,0.5);
transition: box-shadow 0.2s;
}
.fab-options .fab-option:hover * {
box-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.fab-options .fab-option p {
font-size: 18px;
display: inline-block;
padding: 6px 8px;
margin: 0;
background: #424242;
position: relative;
top: -5px;
left: 8px;
border-radius: 2px;
}
.fab-options .fab-option i {
width: 24px;
height: 24px;
border-radius: 100%;
background: #fff;
padding: 6px;
color: #424242;
}<a class="fab-button" href="">
<div class="dot"></div>
</a>
<div class="fab-options">
<a class="fab-option" href="#"><i class="material-icons">refresh</i>
<p>
Refresh
</p>
</a><a class="fab-option" href="#"><i class="material-icons">help</i>
<p>
Support
</p>
</a><a class="fab-option" href="#"><i class="material-icons">info</i>
<p>
Documantation
</p>
</a><a class="fab-option" href="#"><i class="material-icons">settings</i>
<p>
Settings
</p>
</a>
</div>
<a class="fab-button red" href="">
<div class="plus"></div>
</a>
<div class="fab-options">
<a class="fab-option" href="#"><i class="material-icons">insert_drive_file</i>
<p>
New File
</p>
</a><a class="fab-option" href="#"><i class="material-icons">folder</i>
<p>
New Folder
</p>
</a>
</div>
<a class="fab-button pink" href="">
<div class="menu"></div>
</a>
<div class="fab-options">
<a class="fab-option" href="#"><i class="material-icons">home</i>
<p>
Home
</p>
</a><a class="fab-option" href="#"><i class="material-icons">account_circle</i>
<p>
About Us
</p>
</a>
</div>
<div class="fab-shadow"></div>We have tried everything already and by ignorance of the exception rules of these Apple devices we are not able to solve this problem.
We appreciate your help in advance