15 Jun 2016

This article will take about 1 minute to read.
19 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!

Category
CSS/SASS

Comments (19)

Matt Robitaille
10 Jan 2017, 02:57 PM

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, 02:34 PM

works like charm -- after Matt's suggestion

Stanko
12 Jan 2017, 02:56 PM

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 AM

works cool for position absolute too, thanks

Nacho
03 Mar 2017, 11:04 AM

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

Zack
30 Mar 2017, 07:51 PM

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 PM

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

Johnthan
05 May 2017, 11:16 AM

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 AM

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

Johnthan
05 May 2017, 11:51 AM

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, 10:47 PM

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, 01:11 PM

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, 04:09 PM

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

Suzy
17 Oct 2017, 05:14 PM

Worked great! Wonderful solution. Thank you!

Lubos
02 Jan 2018, 08:40 PM

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 AM

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 AM

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, 01:56 PM

Works great! thank you.

Mark
05 Dec 2018, 04:32 PM

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.

Leave a comment

Sending failed, please try again.
Thank you! Your comment is sent. Please note that all of the comments go through moderation.