Wiggling / Shaking svg in sticky header
Hi all,
When i set my :
.header {
position: sticky;
top: 0px;
}
The children ( logo.svg and hamburger toggle) wiggle on scroll on mobile.. the svg is inlined, with proper height, weight and view-box.
Tried fixed, min, max with / height for all.
The only way i found to prevent the wiggle is :
.header {
position: fixed;
transform: translateY(-XXpx};
But its far from ideal as I need to add media queries..
I had it happening on a subnav with food types. but this simply fixed the wiggle :
.food-link svg {
min-width: 1.5rem;
}
I m running out of ideas... If anyone had the same kind of issues, any insight would be greatly appreciated.
Link to the project : https://daya-25p.pages.dev/
Thank you!
When i set my :
.header {
position: sticky;
top: 0px;
}
The children ( logo.svg and hamburger toggle) wiggle on scroll on mobile.. the svg is inlined, with proper height, weight and view-box.
Tried fixed, min, max with / height for all.
The only way i found to prevent the wiggle is :
.header {
position: fixed;
transform: translateY(-XXpx};
But its far from ideal as I need to add media queries..
I had it happening on a subnav with food types. but this simply fixed the wiggle :
.food-link svg {
min-width: 1.5rem;
}
I m running out of ideas... If anyone had the same kind of issues, any insight would be greatly appreciated.
Link to the project : https://daya-25p.pages.dev/
Thank you!
Daya Hendaye
Daya hendaye c’est le meilleur de la street food vietnamienne, thaï et cambodgienne. De la cuisine maison avec des produits frais et de qualité. Nous proposons également des plats végétariens. Venez découvrir notre restaurant situé à deux pas de la plage d’hendaye au pays basque : )
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
