Search the Community
Showing results for tags 'browser render'.
Found 2 results
-
I have an element .desc with the initial styles height: 0; opacity: 0. The task for GSAP is to animate it using fromTo, transitioning from the initial state to height: auto; opacity: 1. This creates a smooth expansion of the element's size, which in turn pushes the element below it (visually below it, but in the code, it's on a higher level). This animation is triggered on hover over the parent .card. The animation works perfectly, but there’s a bug: If I scroll down so that the .desc element is hidden behind the viewport and then hover over the first .card, it seems like the .card itself is expanding, causing the scrollHeight of the page to increase. However, the .card has a fixed height and logically should not grow in size. I’m attaching a minimal code example to reproduce the issue as well as a video showing the bug. I’m using Chrome on Windows 11 (in case it helps).
-
Let me start by saying that I know this is a Chrome/Chromium issue. The CodePen works as expected in Firefox. Also, I know Blake has warned about using foreignObjects but I'm stuck with using them because, in my app, I have to use foreignObjects to render image layers to canvas creating a stack of PNG sequences inside a master SVG. I'm also forced to be able to support Chrome/Chromium. Here's the deal. I've run into a stacking context issue which I thought I had resolved before by doing something subtle to the SVG container using TweenMax to force the browser to do a redraw. Here, though, the issue is a little different. I have to allow my users to shift the order of each foreignObject which I accomplish using a javascript insertBefore. But, as you can see in the CodePen, if you shift the animated element to the back of the stack and then re-run the animation the browser is rendering it on TOP of the stack for as long as the animation is running. Then, once the animation is completed, the browser renders the element to the back of the stack where it belongs. Forcing a redraw like I've done in the past is not working. Any help would be greatly appreciated.
