search

wevisdemo / parliament-watch

Citizens are watching 👀
https://parliamentwatch.wevis.info
47 stars 26 forks source link

Weird flickering slide effect while scrolling down and overflow width on Navigation bar #35

Closed kodaicoder closed 11 months ago

kodaicoder commented 11 months ago

https://github.com/wevisdemo/parliament-watch/assets/110652592/03d84053-9b69-4c77-99db-f788ab410735

issue of overflowing is coming from NavigationBar.svelte the width is set to w-screen has need to change to w-full instead and the weird flickering effect on slide animation is coming from <header> tag class has been using sticky and it will taking a space of window while user scrolling down the nav will get hidden cause a window's Y axis got shorter and then event will fired to scrollEventHandler and that will cause nearly infinite loop on window's Y axis , to fix this issue need to change sticky class to fixed instead to made NavigationBar component not take any space in window and then need to set a class mt-12 (the height of NavigationBar component) to the wrapper of main <slot/> in routes/+layout.svelte to push the main content down and prevent main content got overlapped by NavigationBar component

Th1nkK1D commented 11 months ago

Merged #36

PS. If you plan to fix it by yourself, you can open the PR without creating an issue ;)