position:fixed not working in Google Chrome

Question

I am having some trouble with a 'fixed' element in Google Chrome. The element behaves as it should in other major browsers.

Here is the CSS:

#element { 
    position: fixed; 
    bottom: 0px; 
    width: 100%; 
    height: 50px; 
    z-index: 10;
}

The issue is, when the page loads, the element is fixed at the bottom of the viewport, as it should be. Upon scrolling, it remains at the same spot where it was when the page loaded - it doesn't stay fixed to the bottom of the screen.

There must be more to your problem as it can't be reproduced with that CSS rule on chrome, ie. http://jsbin.com/UcIpANol/1/ works just fine on Chrome. — Erik, Dec 10 '13 at 19:26

score 27 · Accepted Answer · edited Jun 06 '22 at 21:44

27

Try adding the following code to your element:

-webkit-transform: translateZ(0);

edited Jun 06 '22 at 21:44

Peter Mortensen

30,738
21
105
131

answered Dec 10 '13 at 19:31

scooterlord

15,124
11
49
68

3

glad I could help. I almost ate my eyes designing multi-device/browser stuff... edit: also if it helped, accept is as the correct answer, it might help others as well – scooterlord Dec 10 '13 at 19:37
1

that makes it even worse for me: Compare http://jsfiddle.net/Supuhstar/t04nh943/ to http://jsfiddle.net/Supuhstar/t04nh943/2/ – Ky - Aug 08 '14 at 04:23
also try removing relative elements. It might be tough to replace but there's always a way – scooterlord Aug 08 '14 at 09:46
This works so well - for me the element I was giving position fixed did in fact move, but it became invisible for some reason when scrolling and if you were to click on it's position it would sometimes become visible on that spot and the spot it's previously loaded in on, so it also works for such an issue - Thank you! – Gerwin Nov 20 '14 at 08:50
Looking to your answer, made me look at my `transform: translate3d(0,0,0);` and remove it from parent element. While was with it, just made my child element static and not fixed. - Thank You. – klauskpm Feb 03 '15 at 19:51
How and why does it work? From [the Help Center](https://stackoverflow.com/help/promotion): *"...always explain why the solution you're presenting is appropriate and how it works"*. Please respond by [editing (changing) your answer](https://stackoverflow.com/posts/20503545/edit), not here in comments (***without*** "Edit:", "Update:", or similar - the answer should appear as if it was written today). – Peter Mortensen Jun 06 '22 at 21:45

score 9 · Answer 2 · edited May 30 '18 at 21:38

9

I had a property: -webkit-perspective:800; on the body tag. I removed this and the fixed positioning started working again... obscure, but worth a look.

edited May 30 '18 at 21:38

TylerH

20,799
66
75
101

answered Jan 25 '15 at 03:27

Gavin Lovegrove

91
1
1

It also works for me if I removed the perspective property but I need it for a parallax effect... This sucks. – pmrotule Mar 07 '17 at 13:08

score 4 · Answer 3 · answered Feb 05 '15 at 16:29

4

As an addition to the won answer: this would not work if you have "-webkit-transform-style: preserve-3d" in one of the parent elements. I don't know why, I just had such and removed it.

answered Feb 05 '15 at 16:29

Dima Litvinov

121
7

score 2 · Answer 4 · answered Nov 10 '22 at 19:23

This behaviour happens when one of the parents of the position:fixed element has one of the following properties modified:

filter
transform
backdrop-filter
perspective
contain
transform-style
content-visibility
will-change

According to the specification, this generates a containing block for absolute and fixed positioned descendants.

In this answer you can find more informations about it.

score 1 · Answer 5 · answered Sep 27 '16 at 22:35

1

I had to disable:

-webkit-transform: none !important;
transform: none !important;

to make it for me.

answered Sep 27 '16 at 22:35

Marcin Rapacz

616
8
12

score 1 · Answer 6 · answered Jun 08 '18 at 15:52

1

I had to put a left position too for this to appear...not just a top:

{
    left: 0px;
}

answered Jun 08 '18 at 15:52

Robin Morris

11
3

score 1 · Answer 7 · edited Jun 06 '22 at 21:43

1

None of these answers worked for me. What worked for was setting the contain property of the parent element to none:

{
  contain:none !important;
}

edited Jun 06 '22 at 21:43

Peter Mortensen

30,738
21
105
131

answered Oct 24 '18 at 15:58

tariksoypt

11
1
3

score 1 · Answer 8 · answered Oct 29 '18 at 11:19

1

I used position: sticky; bottom: 0; for now.

#element { 
   position: sticky; <--- 
   bottom: 0px; 
   width: 100%; 
   height: 50px; 
   z-index: 10;
}

answered Oct 29 '18 at 11:19

alex351

1,826
1
21
32

score 0 · Answer 9 · answered Mar 11 '18 at 21:37

0

To complete what the other answers are saying, also be aware that setting the will-change property on any parent element will break fixed positioning.

answered Mar 11 '18 at 21:37

remidej

1,428
1
14
21

This should probably be a comment. – Pyves Mar 11 '18 at 22:02

score 0 · Answer 10 · answered Apr 01 '18 at 18:53

First check if any parent have

-webkit-transform: translateZ(...);

or

transform: translateZ(...);

or

-webkit-transform: translate3d(...)

or

transform: translate3d(...)

and try removing them.

If still doesn't work try adding

-webkit-transform: translateZ(0);

or

transform: translateZ(0);

to your element.

If still doesn't work check for other -webkit-transform / transform / perspective styles on parents and remove them.

score 0 · Answer 11 · answered Feb 19 '19 at 20:36

0

I fixed it by removing

filter: blur(0);

in the parent element. I only had this issue with chrome, it was working well with Safari.

answered Feb 19 '19 at 20:36

zookd

41
1
4

score 0 · Answer 12 · edited Jun 06 '22 at 21:44

0

The property will-change:transform; was causing the issue for me. I just needed to add will-change:auto; to override it.

edited Jun 06 '22 at 21:44

Peter Mortensen

30,738
21
105
131

answered Apr 18 '19 at 12:31

Matt Scott

1
1

score 0 · Answer 13 · edited Jun 14 '22 at 15:13

0

For me none of these solutions helped, the problem turned out to be one of my Chrome extensions. Disabled all extensions and the problem has been resolved.

edited Jun 14 '22 at 15:13

Eric Aya

69,473
35
181
253

answered Jun 14 '22 at 12:17

kreshnov

129
1
3

score -1 · Answer 14 · edited Dec 26 '18 at 13:44

-1

Try using

contain: none;

in the parent element.

edited Dec 26 '18 at 13:44

NikxDa

4,137
1
26
48

answered Dec 26 '18 at 12:51

Njehuu

59
3

position:fixed not working in Google Chrome

14 Answers14

Linked