Update _header.scss
The menu does not open on iOS Safari because of how it can't handle translateZ, and needs an -webkit specific prefix for the @keyframes property for the animation to work. This PR fixes the issue.
This commit is contained in:
parent
f33b057961
commit
b059fb48fc
@ -206,6 +206,8 @@ body > header {
|
|||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, 0);
|
transform: translate(-50%, 0);
|
||||||
transform: translateZ(0);
|
transform: translateZ(0);
|
||||||
|
-webkit-transform: none !important;
|
||||||
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@ -218,6 +220,7 @@ body > header {
|
|||||||
.mobile-label {
|
.mobile-label {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translate(-50%, 80%);
|
transform: translate(-50%, 80%);
|
||||||
|
-webkit-transform: translate(-50%) 80%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -237,6 +240,18 @@ body > header {
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@-webkit-keyframes menuOpening {
|
||||||
|
from {
|
||||||
|
-webkit-transform: scaleX(0);
|
||||||
|
transform-origin: 'left';
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: scaleX(1);
|
||||||
|
transform-origin: 'left';
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
body > header {
|
body > header {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
Loading…
Reference in New Issue
Block a user