1

note: I know first behavior is related to margin collapse but I still can't explain why the jumping up and down behavior of the top left pink menu happens on mouse click. Details below.

I was following a course. Here is project link and here demo.

Page looks like this:

preview

Now after we make a single change in CSS from above link namely comment padding:

.container {
  background-color: #fafafa;
  transform-origin: top left;
  transition: transform 0.5s linear;
  width: 100vw;
  min-height: 100vh;
  /* padding: 50px; */               
}

Two things start to happen:

  1. container is shifted down, isn't that business of margin?
  2. Notice how the top left pink fixed menu starts to jump vertically up and down when you click to open and close the menu.

Ok first behavior was suggested to me to be because of margin collapse, now second behavior is also probably due to margin collapse, but I can't explain still why that kind of behavior happens: namely that the top left pink menu starts to jump up and down on open/close click?

  • Transforms create a new stacking context, and there is no transform set on the default state, only when the nav is open. So that's why it changes. – Niet the Dark Absol Jan 17 '21 at 13:57
  • @TemaniAfif Sorry not sure what you mean? So this happens because both of margin collapse AND stacking context? –  Jan 17 '21 at 14:07
  • your fixed element will use its container as reference when there is a transform applied and margin collapsing is making this clear since the margin is getting outside the container – Temani Afif Jan 17 '21 at 14:09
  • @TemaniAfif what do you mean with "margin collapsing is making this clear since the margin is getting outside the container" ? –  Jan 17 '21 at 14:15
  • here is another question that detail the same: https://stackoverflow.com/a/52937920/8620333 – Temani Afif Jan 17 '21 at 14:15
  • 1
    don't try to understand both issues at the same time (1) understand what is margin collapsing and its effect then (2) understand how transform affect position:fixed – Temani Afif Jan 17 '21 at 14:16
  • @TemaniAfif Thanks I will try. but it seems it is because of both (1) and (2): because if padding is there (hence no margin collapse) the top left menu doesn't jump up and down –  Jan 17 '21 at 14:19
  • 1
    no, it's not both. It's a simple coincidence because with padding the container is sticking on the top of the page so you will not notice the issue (2) that is happening even without margin collapsing – Temani Afif Jan 17 '21 at 14:20
  • @TemaniAfif ah interesting since this stuff is beyond my knowledge now, so you say if I read above links I should understand all this then? Thanks –  Jan 17 '21 at 14:22
  • 1
    yes and take your time because it's not easy – Temani Afif Jan 17 '21 at 14:23
  • @TemaniAfif I understood how because of `translate` now the fixed element (the menu) takes position relative to the `container` right? And this is why the pink menu is shifted when I click toggle button right (because it takes on a new position)? But I don't get still why I can't notice that when there is padding applied, can you somehow break it down for me ? –  Jan 17 '21 at 14:52
  • since you understand that your element is relative to the container now you need to understand the position of the container and how it's affected by margin collapsing that padding disable if added (Notice how the container is shifted down without padding) – Temani Afif Jan 17 '21 at 14:54
  • @TemaniAfif Assume there is no margin collapse (i.e. there is padding), and I click the toggle button. You can see the pink menu doesn't jump out of its original position, even though there is a `transform`, why? –  Jan 17 '21 at 14:57
  • because the top of the container is at the same position of the top of your screen so you will jump between two position that are at the same place – Temani Afif Jan 17 '21 at 14:59
  • @TemaniAfif One thing which is clear is that when there is margin collapsing, the position of the `container` **changes** when switching between the transform version and non transform version, the problem is I don't know how it changes? –  Jan 17 '21 at 15:13

1 Answers1

-1

Ok, so i figured it OUT! The problem is that you make a transition between two states. At the beginning - your container does NOT have transform, but when the class show-nav is applied - you activate transform. Usually when activating another "display mechanism" - in order for it to transit/animate correctly, you should set it in the initial state also (usually - zeroed)

So without padding, you could set an "transform: rotate(0)" in the container selector - before it is changed by the class "show-nav".

Dorin Esinenco
  • 24
  • 1