Question

0

259

Visualizações

Animated element not visible outside of parent container in Firefox

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 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>

over 4 years ago · Santiago Trujillo

2 Respostas

Responde à pergunta

0

Try this splution:

.wrapper position set to fixed
.content is shifted down with transform: translateY()
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>

over 4 years ago · Santiago Trujillo Relatório

0

Responde à pergunta

Encontrar trabalhos remotos

Accepted Answer · 2022-05-19T14:20:06.745Z

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>

0

259

Animated element not visible outside of parent container in Firefox

2 Respostas

0

0

Encontrar trabalhos remotos

Andres GPT