Animated element not visible outside of parent container in Firefox

user_13504606 0
Viewed 148

I have a animated div that flies to the top right corner of the viewport.

However, because of the overflow properties it not visible outside of parent container in Firefox. It is perfectly visible in Chrome.

Element behind the scrollbar in Firefox:

Element behind the scrollbar in Firefox

Element correctly above the parent in Chrome:

Element correctly above the parent in Chrome

How can I make it work in Firefox as well? If overflow-y: auto is removed from .container the issue doesn't appear anymore, but that's not a viable solution as I need the scrollable content.

Here is an example. You can check that it produces the desired behaviour in Chrome, but not in Firefox:

.app {
  overflow: hidden;
}

.container {
  width: 260px;
  max-height: 400px;
  background: blue;
  left: 10px;
  right: 10px;
  top: 10px;
  position: fixed;
  z-index: 500;
  overflow-y: auto;
}


.wrapper {
  height: 250px;
  padding: 10px;
  margin: 5px;
  background: yellow;
  top: 5px;
  position: sticky;
}

.content {
  height: 600px;
  margin: 5px;
  background: orange;
}



@keyframes fly-to-top {
  10% {
    top: 150px;
    right: 80%;
    width: 50px;
  }

  30% {
    top: 120px;
    right: 70%;
    width: 45px;
  }

  60% {
    top: 75px;
    right: 40%;
    width: 40px;
  }

  100% {
    top: 10px;
    right: 160px;
    width: 35px;
  }
}


.animated {
  position: fixed;
  right: unset;
  top: 165px;
  width: 50px;
  background: red;
  color: white;
  animation: fly-to-top linear 2s forwards;
  display: flex;
  align-items: flex-start;
}
<div class="app">
  <div class="container">
    <div class="wrapper">
      <div class="animated">
        Text
      </div>
    </div>
    <div class="content">
      Lorem ipsum
    </div>
  </div>
</div>

css-animations css-position firefox css html
2 Answers

Try this splution:

  1. .wrapper position set to fixed
  2. .content is shifted down with transform: translateY()
  3. In the .wrapper class, i was add pointer-events: none;, because if cursor is on the .wrapper block without this property, mouse wheel cann't scroll the content, scroll work only when drag the scroll bar.

.app {
  overflow: hidden;
}

.container {
  width: 260px;
  max-height: 400px;
  background: blue;
  left: 10px;
  right: 10px;
  top: 10px;
  position: fixed;
  z-index: 500;
  overflow-y: auto;
}

.wrapper {
  display: flex;
  height: 250px;
  padding: 10px;
  margin: 5px;
  background: yellow;
  /* top: 5px; */

  position: fixed; /* changed */
  /* calculate '.container' width - scroll-track-width(12px-17px) - '.wrapper' padding(left, right) - margin(left, right) */
  width: calc(260px - 12px - 20px - 10px);
  z-index: 5;
  pointer-events: none; /* mouse wheel work with this property */
}

.content {
  height: 600px;
  margin: 5px;
  background: orange;
  /* calculate '.wrapper' properties to shift '.content' down  */
  /* height + padding(top, bottom) + margin-bottom */
  transform: translateY(calc(250px + 20px + 5px));
}

@keyframes fly-to-top {
  10% {
    top: 150px;
    right: 80%;
    width: 50px;
  }

  30% {
    top: 120px;
    right: 70%;
    width: 45px;
  }

  60% {
    top: 75px;
    right: 40%;
    width: 40px;
  }

  100% {
    top: 10px;
    right: 160px;
    width: 35px;
  }
}

.animated {
  position: fixed;
  right: unset;
  top: 165px;
  width: 50px;
  background: red;
  color: white;
  animation: fly-to-top linear 2s forwards;
  display: flex;
  align-items: flex-start;
  z-index: 100;
}
<div class="app">
  <div class="container">
    <div class="wrapper">
      <div class="animated">
        Text
      </div>
    </div>
    <div class="content">
      Lorem ipsum
    </div>
  </div>
</div>

user_155451160

Edited after comment:

You can take the animated element out of its parent (i.e. the element which has overflow: hidden), on a higher level in the HTML code - as a sibling to the container. I did that in the snippet below, and also added a z-index that places the animated element above the container:

.app {
  overflow: hidden;
}

.container {
  width: 260px;
  max-height: 400px;
  background: blue;
  left: 10px;
  right: 10px;
  top: 10px;
  position: fixed;
  z-index: 500;
  overflow-y: auto;
}

.wrapper {
  height: 250px;
  padding: 10px;
  margin: 5px;
  background: yellow;
  top: 5px;
  position: sticky;
}

.content {
  height: 600px;
  margin: 5px;
  background: orange;
}

@keyframes fly-to-top {
  10% {
    top: 150px;
    right: 80%;
    width: 50px;
  }
  30% {
    top: 120px;
    right: 70%;
    width: 45px;
  }
  60% {
    top: 75px;
    right: 40%;
    width: 40px;
  }
  100% {
    top: 10px;
    right: 160px;
    width: 35px;
  }
}

.animated {
  position: fixed;
  right: unset;
  top: 165px;
  width: 50px;
  background: red;
  color: white;
  animation: fly-to-top linear 2s forwards;
  display: flex;
  align-items: flex-start;
  z-index: 501;
}
<div class="app">
  <div class="container">
    <div class="wrapper">
    </div>
    <div class="content">
      Lorem ipsum
    </div>
  </div>
  <div class="animated">
    Text
  </div>
</div>

user_56416690
Related