mirror of
https://git.joinplu.me/Plume/Plume.git
synced 2024-11-25 13:01:08 +00:00
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
1 changed files with 19 additions and 4 deletions
|
@ -206,6 +206,8 @@ body > header {
|
|||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transform: none !important;
|
||||
|
||||
opacity: 0;
|
||||
font-size: 0.9em;
|
||||
white-space: nowrap;
|
||||
|
@ -218,6 +220,7 @@ body > header {
|
|||
.mobile-label {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 80%);
|
||||
-webkit-transform: translate(-50%) 80%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -237,6 +240,18 @@ body > header {
|
|||
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 {
|
||||
flex-direction: column;
|
||||
|
|
Loading…
Reference in a new issue