aitzol/Plume
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update _header.scss

Browse Source 
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:
Marek Ľach 2021-01-10 18:32:21 +01:00 committed by GitHub
parent f33b057961
commit b059fb48fc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
assets/themes/default/_header.scss
View File

@ -19,7 +19,7 @@ body > header {
a { a {
transform: skewX(15deg); transform: skewX(15deg);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -204,8 +204,10 @@ body > header {
display: block; display: block;
position: absolute; position: absolute;
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;
@ -217,7 +219,8 @@ body > header {
i { margin-bottom: 0.75em; } i { margin-bottom: 0.75em; }
.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;