2

Im pretty good with my css and i'd like to think i can figure why most things do what they do when it comes to frontend development. But i came across an issue today that I don't fully understand.

Heres the code:

.nav-toggle {
  position: absolute;
  transform: translateY(50%);
}

.nav-open .nav-toggle:after {
  background: rgba(0, 0, 0, 0.5);
  content: '';
  display: block;
  height: 100%;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 1;
}
<span data-action="toggle-nav" class="action nav-toggle">
         <span>Menu</span>
</span>

Here is a fiddle for it:

https://jsfiddle.net/0vm962be/1/

And here is the second fiddle with the transform commented out.

https://jsfiddle.net/0vm962be/2/

So you'll see the difference.

So, what i would expect to happen is the after would be 100% width of the body and 100% height of the body, when the parent element has a .nav-open class.

However because of 1 simple line of code (transform: translateY(50%)), this doesn't happen, what actually happens is the fixed element acts like a absolutely positioned element inside of the .nav-toggle and only goes 100% to its parent.

why would a transform on a parent have an impact of a fixed element? I though position: fixed; broke the document flow no matter what. And only listened to the window width height. I need to learn why this happened.

Any advice would be great. Links to specs etc?

andy jones
  • 904
  • 1
  • 12
  • 37

2 Answers2

2

Haha, that's funny. I had the same issue not that long ago.

Apparently, it's a bug in webkit browsers. See: https://bugs.chromium.org/p/chromium/issues/detail?id=20574 As mentioned here: https://stackoverflow.com/a/2637267/2632061

That means, there is no way this can work, unfortunately. You could try something similar with flexbox probably but what are you even trying to achieve, it's not 100% clear to me just from that fiddle.

In the HTML namespace, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.

This means that fixed positioning becomes fixed to the transformed element, rather than the viewport.

Community
  • 1
  • 1
Simon
  • 591
  • 6
  • 22
  • Thanks for the info. I really was scratching my head over it, and i couldn't find anyone with the same issue. Looks like it'll have to be a top:5px; instead then haha. – andy jones Apr 03 '17 at 10:36
-1

Use vh and vw instead percent: https://jsfiddle.net/93ybxgau/1/

.nav-open .nav-toggle:after {
  background: rgba(0, 0, 0, 0.5);
  content: '';
  display: block;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  z-index: 1;
}
Germano Plebani
  • 3,461
  • 3
  • 26
  • 38