"jumping effect" with sticky position on newer iOS devices
The content of the header element has a "jumping effect" when scrolling. This only happens on iOS mobile devices.
The header has sticky position. If I change it to fixed position, it fixes the issue, but then the scroll bouncing effect doesn't work well. How is it possible to fix this issue without using fixed position?
The website with the described problem is online and you can see and edit the CSS by inspecting the website in browser.
I tried changing the position, setting the width of the child elements in the header, but nothing fixed the problem.
Edit:
After further investigation, the issue seems to occur on newer iOS devices, such as the iPhone 13 or newer, and not just in the simulator, as originally assumed.
One "trick" that has helped me a lot in the past with transition/animation issues in Safari (but sometimes in other browsers too) where things get shaky and jumpy, is to force the browser to use "hardware acceleration" so that the browser also uses GPU power instead of just CPU power to render.
There are many articles on this topic because it has been around for a long time, but it is still relevant, and you can read up on it if you are interested in more information:
- The translateZ Trick by Michael Uloth
- Web Performance fundamentals on MDN mentions this usage too
- CSS GPU Animation: Doing It Right
In your specific case, put the following CSS declaration on the "jumping" SVGs in your sticky header:
transform: translateZ(0);
This seems to stop the "jumping" of the SVGs in your sticky header when scrolling on newer iOS devices.
Original Answer:
Since I see a mouse cursor on your GIF, I assume you tested it with an iOS simulator. Is this assumption correct?
If so, this seems to be a problem/bug in the simulator (which is a common thing with simulators because they are not 100% accurate and the same as the original OS/device).
I came to this conclusion because testing the sticky positioned header on a real iOS device (iOS Version 17 on iPhone 11) does not seem to reproduce the unwanted "jumping" effect, as can be seen in the following recording (low-res GIF):
- Fast ceiling of an integer division in C / C++
- Is there an invalid pthread_t id?
- How does SIMD (avx) processing work? for example, if I want 10 32 bit floats how do i fit in a 256 bit avx vector?
- How memory address for pointer to arrays is same as an element in 2D array?
- FDCAN problems on STM32G4
- How does the call macro enable mutual recursion between functions f and g in this Hanoi Tower implementation?
- Running test on Rocket core CPU - global variable initialized to 0 is unsuccessful, output wrong value instead
- Interacting with C arrays without knowing the size
- Combination of two strings
- Avoiding strcpy overflow destination warning
- carriage return by fgets
- How to use special characters in C?
- Why does 1.0/100.0 == 0.1/10.0 give True?
- Is it correct to compare pointers in C?
- How can I exclude non-numeric keys? CS50 Caesar Pset2
- Force free() to return malloc memory back to OS
- How can I print to standard error in C with 'printf'?
- What is the standard behavior of fread in C on Windows?
- How is strtok removing lines it shouldn't have access to?
- Using array as smart point in C
- Assigning string to malloced 2d char array not working as intended
- How to refactor repetition inside a Makefile?
- Why does an empty preprocessor command still evaluate to something?
- How to implement variable sized array within C struct
- Character array typecasting to integer
- Handling HTTP Headers in a Minimal C HTTP Server
- How to get the sign, mantissa and exponent of a floating point number
- Why do MCU libraries use logic operations instead of bitfield structs?
- What kind of implementation can I use for a static associative array on a vintage system with very limited resources?
- Clarification - Struct Bitfield memory layout