Resizing browser breaks accordion dropdown animations

Hi all,

Despite combing through similar topics I can’t sort out the bug in my portfolio site accordions:

https://preview.webflow.com/preview/latyndesign?utm_medium=preview_link&utm_source=designer&utm_content=latyndesign&preview=041ae1d1cae0fc627c30b28f5845d066&workflow=preview

I have each project built as a slider inside of a dropdown. Works fine right up until I add the resize animation to a dropdown to have the content “slide downward”. Once the animation is added, resizing the browser auto-closes any open dropdowns to which the animation has been applied, and both dropdown toggles and the internal images stop resizing responsively.

In the project link shared above, the top-most project has the animation removed, and those below it have it added, so it’s easy to the see the behavioral differences when resizing the window.

I’ve found a few answered topics suggested I make the widths in each interaction 100% that have worked for others, but they don’t seem to here — when I do that, the dropdowns narrow some sort of min height. No idea what I’ve jacked up, but I’m sure it’s convoluted user error. Hoping someone can sort me out. It works without the animations, but just doesn’t look as crisp or finished.

Thanks in advance for any help.

Self-solved this (user error indeed), though I’ve found a different issue.

Through A/B testing I’ve figured out that putting a Slider inside a dropdown causes the dropdown to immediately appear and then close on both page load and when resizing the browser window. No idea why this causes such a behavior so having a heck of a time finding a workaround or solution.

Any ideas?