Change to position fixed on iOS Safari while scrolling

15. June 2016
Posted in CSS/SASS
· 1 minute read
27 Comments

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!

Related Posts

CSS fix to prevent orphan icons dropping to a new line
12. November 2024
CSS only floating labels
05. July 2023
CSS blocky people making waves
10. November 2022

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.

anarchimedes
12. Jan 2017, 14:34

works like charm -- after Matt's suggestion

Stanko
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.

Harsha
16. Feb 2017, 06:48

works cool for position absolute too, thanks

Nacho
03. Mar 2017, 11:04

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

Zack
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!

Stanko
31. Mar 2017, 12:22

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

Johnthan
05. May 2017, 11:16

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

Stanko
05. May 2017, 11:27

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

Johnthan
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.

Michel
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?

Stanko
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!

Jeka
31. Aug 2017, 16:09

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

Suzy
17. Oct 2017, 17:14

Worked great! Wonderful solution. Thank you!

Lubos
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.

thangavel
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]

Stanko
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.

Cheers!

Roslan
09. Jul 2018, 13:56

Works great! thank you.

Mark
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 :)

Sean
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.

Stanko
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.

Cheers!

David
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

Krish
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.

Dasha
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 ?

Thanx)

LXX
05. Jan 2021, 09:23

Cool !!!