Animated element not visible outside of parent container in Firefox-CodePudding

The

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 > <div > <div > <div > Text </div> </div> <div > Lorem ipsum </div> </div> </div>

CodePudding user response：

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 > <div > <div > </div> <div > Lorem ipsum </div> </div> <div > Text </div> </div>

CodePudding user response：

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 > <div > <div > <div > Text </div> </div> <div > Lorem ipsum </div> </div> </div>