Position fixed not working is working like absolute

my question is pretty simple. I'm working on a page on mobile version, and we want to keep the "snag it" yellow button fixed on bottom, but position fixed is not working, it's working like position absolute and i don't know why.

The page i'm working: https://www.thechivery.com/products/everything-is-j-ok-tee

Thanks, Luiz

The issue here lies with your .content-container wrapper class, which has a CSS declaration of webkit-transform: translate3d(0,0,0). The transform declaration, as this answer illustrates, changes the positioning context from the viewport to the rotated element, which essentially means that your fixed element behaves as if it were absolutely positioned. Here's an example showing the difference between a fixed element inside a transformed div and a fixed element outside of that div.

.rotate {
  transform: rotate(30deg);
  background: blue;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}
.fixed {
  position: fixed;
  background: red;
  padding: 10px;
  color: white;
  top: 50px;
}

<div class="rotate">
  <div class="fixed"> I am fixed inside a rotated div.</div>
</div>
<div class="fixed"> I am fixed outside a rotated div.</div>

In order for everything to work, you'll need to remove the transform3d declaration from .content-container.

For anyone wondering if this is a browser bug. Apparently it's not and it follows current W3C specs. What's strange is at first it was just inconsistent between the browsers (in some it worked as intended) and then all of them started to follow the counter intuitive W3C rules. There seems to be no clear explanation if this is actually intended logic, a side effect of some implementation problem or just a dumb omission.

Also position: fixed gets broken not only by transform but also by filter and perspective property put on any ancestor as explained here.

See: https://www.w3.org/TR/css-transforms-1/#propdef-transform and https://www.w3.org/Bugs/Public/show_bug.cgi?id=16328 and https://github.com/w3c/csswg-drafts/issues/913 for more info on this issue.

In my case, the problem was caused by mixing a css transform with overflow: auto; on the parent.

I created a new child element on which I moved the overflow property.

Separating the two properties fixed the issue.

It's a mobile specific issue. I have encountered this issue before. Generally speaking mobile browsers, particularly older ones, restrict the use of fixed positioning because it can take up too much room on the screen.

http://bradfrost.com/blog/mobile/fixed-position/