#Anybody got wiggling SVG's on sticky header?

13 messages · Page 1 of 1 (latest)

hot zealot
#

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!

Daya Hendaye
Street food asiatique à Hendaye | 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 : )

hot zealot
#

I tried on a blank astro install. It also happens with the most simple svg : <rect width="50" height="50"/>.

Sticky header makes the svg wiggle a bit on scroll.... I m really surprised i didnt find any posts related to that..
On safari, chrome, iPhone 13pro

hot zealot
hot zealot
#

Temporary fix found : .header{top: -0.5px} but fractional pixel is not the best.

mental swallow
#

I can't see what you're describing in the video

hot zealot
#

I know its sublte, but look at the logo and hamburger toggle, they vibrate on scroll...

#

Its happening only on ios.

ancient hornet
#

I can see it, it's very minimal.

#

Do you set the body to 100% or 100vh by any chance?

#

Small chance, but I have no other ideas houston_cowboy_extendo

mental swallow
#

Try giving the header a fixed height

uneven scaffold
#

Maybe not your problem, but Ive also dug into unsolvable subpixel rounding issues before, only to discover it was being caused by my browser not being at 100% zoom

hot zealot
#

Hey guys, thank you for answering, I have no fixed hight on body. Fixed height on header doesnt solve the wiggle. Since its happening only on ios, I used the fractional top position only on safari.