Change to position fixed on iOS Safari while scrolling

If you ever had to fix element on scroll, you probably had an issue on iOS Safari (and other mobile devices). Element will usually flicker, and disappear until scrolling has stopped completely.

Just force GPU acceleration by adding transform: translate3d(0,0,0); to your element.

You will have something like this:

.Element-header {
  transform: translate3d(0,0,0);

.Element-header--fixed {
  top: 0;
  position: fixed;

Enjoy ¯\_(ツ)_/¯

Update, if the element inside fixed one flickers

In the comments Matt made a great tip, so I'm adding it here as well:

If you are styling the element within fixed element, you need to apply the translate3d hack to the nested element in order for it to not flicker/disappear.

Thanks Matt!

Comments (27)

Matt Robitaille
10. Jan 2017, 14:57

This was helpful for me – however, I found that if I had a fixed position on an element but was styling the element within it, I had to apply the translate3d to the nested element in order for the element to not flicker/disappear. This may be helpful to some others.

12. Jan 2017, 14:34

works like charm -- after Matt's suggestion

12. Jan 2017, 14:56

Thank you both, Matt for the tip and anarchimedes for the feedback.

I hope you don't mind I added it to the article as well.

16. Feb 2017, 06:48

works cool for position absolute too, thanks

03. Mar 2017, 11:04

Great! You resolve me a huge problem! Txh a lot!

30. Mar 2017, 19:51

Wow, if you had a donate button on this article I would pay you. You fixed my issue of hours of research!

31. Mar 2017, 12:22

Haha thanks a lot Zack! :) no worries, you made my day, that's enough!

05. May 2017, 11:16

Thanks for the article I tried it directly on my element fixed, but the fixed position somehow got canceled?

05. May 2017, 11:27

Hello Jonathan, probably something else in your code removed it. CSS property can't be canceled by itself.

05. May 2017, 11:51

Wow, fast reply, thank you! OK it was because I put them in one single class, but still I got these flickering...

I also tried with backface visibility hidden, but no chance.

28. Jun 2017, 22:47

Hey, I need to understand one thing, i must to apply translate3d at every element that it will pass scroll through the fixed element?

29. Jun 2017, 13:11

Hello Michael,

Not sure what you are asking, but my guess is - should you apply translate3d to children of the element with position: fixed? It depends of the usecase, like Matt suggested, if children elements are flickering you should apply translate3d on them.

Hope that answers your question, cheers!

31. Aug 2017, 16:09

God bless you, my friend! It's works like a miracle!

17. Oct 2017, 17:14

Worked great! Wonderful solution. Thank you!

02. Jan 2018, 20:40

Hi Stanko! No feedback on the article, just leaving an online trail as I somehow ended up here and you’re somehow 1 of 2 people I follow on GitHub so I recognised you.

12. May 2018, 09:27

Hi Stanko,

I have tried with your solution. But in our side is not working in iPhone. Please let me know what i wrong in below code

My code is

[code stripped]

12. May 2018, 09:37

Hello @thangavel,

I've stripped huge chunk of code you posted in your comment. It was unreadable, next time please try making example on codepen or jsbin.


09. Jul 2018, 13:56

Works great! thank you.

05. Dec 2018, 16:32

I had an element whose styling would change from relative to fixed but would sometimes fade out and no longer work after a few events on MacBook Air Safari OS 10.14.1. Adding this CSS styling to the element resolved the issue.

Rohit Arora
23. Apr 2019, 12:02

This saved my life, how do you find out this hidden feature :)

18. Jun 2019, 19:02

I've got the transform on the parent of a child that is fixed to the top of a modal whose contents are scrollable, which is set to be 100% of the width and height of the viewport, interestingly, the transform seems to just prevent the child element from being fixed, it no longer scrolls with the page, if I remove the transform from the parent, the child will scroll with the page, but it's flickering real bad. Can you think of any reason why this would happen? I'm stumped.

18. Jun 2019, 19:50

Hi Sean,

That is correct, position: fixed won't work if any parent element has a transform applied. Unfortunately, without a example it is hard to see what is going on in your case. Try applying transform: translate3d(0, 0, 0) and backface-visibility: hidden hacks, but it is hard to tell if that is going to help.


08. Aug 2019, 07:31

Hi, Why is this not working for me? ive got my button fixed to the bottom with CSS: position: fixed; bottom: 0; left: 0; border-radius: 0;

within a div with CSS: margin-top: 1.5em; text-align: left;

I can provide more information if that is not enough

Edison Neo
06. Sep 2019, 03:37

You are a genius, thanks for saving my life

25. Oct 2019, 13:15

Matt, when I have a input at the bottom of the page and on its focus, I get extra white space while scrolling. How to get rid of this white space.

The parent div is fixed.

03. Feb 2020, 14:15

I have the same issue.

When I have a input at the bottom of the page and on its focus, I get extra white space while scrolling. How to get rid of this white space.

Has someone found a solution ?


05. Jan 2021, 09:23

Cool !!!