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!
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 : )
39 Replies
can you record it?
yes sure, i m glad to see you answering here.. i was reading a lot of your interesting comments...
im sorry for sounding super dumb, but, i cant see any issues
can you point out like if i was a dummy?
i try to help where i can
Oh i wish it was only in my mind ahaha but i think its does really exist. Its sublte but look at the logo and hamburger in the header.. They shake on scroll....Doesnt happen if i use anything other than svg.
jesus that is such a tiny tiny tiny movement
now that i see, i can't unsee
YEsss!! and its killing me...
Exactly!
Been trying to deconstruct everything, commented out all the js functions... layouts etc...
it's perfectly fine on my phone
no movement at all here
What phone is it ?
oppo a18 running android 15 with june's update
i think it might be an iphone issue, and i dont have one to test
On iPhone 13 pro, it happens on all browsers.. Closed all apps and tabs as i thought its a performance issue.
Yes you are right
by the way, can you check if you have the smooth thingy bs apple has, for 90fps?
if you have it enabled, disable and try again
Been down a rabbit hole about svg subpixels.. but i made the logo pixel perfect. it should not need to repaint.
if it is disabled, enable abd try again
Oh let me check, good idea
pixel perfect and fairy dust are in the same box for me
your phone lies about the screen size, in css
the viewbox is smaller than the screen resolution
yeah i did ask myself a few times... sometimes units dont make sense
its too much for me.
i miswrote about "css units"
ignore the units
Cant find any 90fps settings... The weird thing is that i had the same wiggle on the food subnav but i fixed with a min-width on the svgs. but it doesnt work on the header situation. I undersand its hard for you to do anything about it if you cant see it. I'll sleep over it and hopefully a fresh idea will come later.
what happens if you use translateZ(0px) on the icons?
Yep i tried. Should fix but it doesnt..
backface-visibility: hidden;
will-change: transform;
how about top: -0.5px?
i assume it is sticky
it is sticky yes. it happens also on fixed. but if fixed without top0 ( its in the middle of the screen) there is no wiggle. as soon as its on the top it starts again
and what im saying is for you to try to position it at -0.5px
so a tiny bit is going over
whaahahahahah!!!!!!!
I dont know how to express my gratitude !!
The half pixels fixes it !
sub-pixel rendering is a bitch
How did you come to this idea???
want an honest answer?
"if the browser is fucking idiotic and is doing this, how about i tell it the dumbest thing? maybe it will work!"
also, on android, at one point, i saw a row of pixels on top of the navbar, while scrolling
yes thats why i had set the header on top-1px. but even on 0 it was wigling. but damn...-0.5 .... im dead. i
so ...
Nop, sorry...
answering your deleted question: it depends
but if it works in safari and you are in usa, it must work on chrome too
more specifically, not in eu
in eu, apple's been fined for not allowing other browser engines to work on apple, so, now, it's possible that your chrome version uses blink instead of webkit
however, blink is a fork of webkit, so ...
it's messy, it depends
My apple account is in fr so apps are europe i guess. and your solution works on safari, chrome, firefox.. but i v been told not to use fractioned pixels by a friend. He's Greek as well btw. Because each browser round differenlty, Been told to apply debounce on scroll event, Will try that as well.
im not greek
i just liked how the name looks like 🤣
he is right, you shouldnt apply fractional units, because it can cause really bad sub-pixel rendering and make everything blurry
but, sometimes, you gotta do what you gotta do
the debounce on scrolling is true ... if you are doing something in js
Oh Ah, ok.. I tried debouncing the scroll event on the header but it delays the -scrolled class with the bg. And the wiggle happens less but sometimes it still does.
is there any good reason why you dont have it with just position: sticky and dont do anything in js?
the way it works is that it acts like position static when the whole thing is visible
but when it isnt visible, it acts like a position fixed
The js is here to hide the bg when the header is on top of the hero. Default hero has bg transparent and the js ads -scrolled with a bt. First thing i did when i noticed the bug was to disable all the js. but it still happens. its from the position:fixed or sticky.
I'm on Astro, i posted on their Discord as well.. waiting for anyone to notice my post...
yeah, ive seen others complain of scrolling shenanigans before, on ios too
probably just safari's gremlins
but hey, as long as it all works
Yeah... that's what i think as well...
It was awesome for me to have this discussion! Thank you very much !
you're welcome