www
/
www-new
12
3
Fork 5
Code Issues 58 Pull Requests 42 Projects Releases Wiki Activity

Fix weird animation flash on mobile (#304)
continuous-integration/drone/push Build was killed Details 

When we visit the website on mobile, there's a weird animation flash. This is caused because the navbar by default is placed at left: 0, and we see the transform animation once the page loads. This places the navbar at left: 100% (outside the screen) and transforms it to move into the screen - translateX(-100%)

Reviewed-on: #304
Reviewed-by: Amy <a258wang@csclub.uwaterloo.ca>
Co-authored-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Co-committed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
This commit is contained in:
Aditya Thakral 2021-09-08 13:49:45 -04:00
parent 0043c3f949
commit c7f0d83bba
1 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/Navbar.module.css
View File

@ -152,6 +152,11 @@
visibility: visible;
}
/* Prevents a weird flash of opacity change on mobile */
.navMobileBackground {
opacity: 0;
}
/* On a smaller desktop screen, keep the same navbar layout but decrease the
* horizontal padding so it still fits
*/
@ -237,7 +242,7 @@
box-sizing: border-box;
height: 100%;
top: 0;
right: 0;
left: 100%;
overflow: auto;
z-index: 30;
@ -246,7 +251,6 @@
background-color: var(--secondary-background);
transform: translateX(100vw);
transition: 0.5s;
}
@ -364,7 +368,7 @@
}
.show.navMobileBackground + .navMenuWrapper {
transform: translateX(0);
transform: translateX(-100%);
}
.rotate {