Streaming live at 10am (PST)

Interaction causing border-radius to disappear from dynamic item on hover


#1

I have a dynamic list with two dynamic items, Item 1 and Item 2. Basically 2 divs each with a text container div and text inside. Both items have border-radius: 8px

When I hover over Item 1, the relevant animations occur, when I hover out they revert as expected, but the border-radius of Item 2 visually disappears

GIF here: https://gfycat.com/WickedAstonishingIberianchiffchaff

More info:

I have two changes that occur on hover:
1. Hover state for .container
Animation: inner shadow change opacity & shadow size
2. Interaction
Trigger: Hover over .container, affects text container - nested elements only
Animation: Hover Over - transform Y -70px - looped & Hover Out - transform Y to origin hover out - looped

Issue occurs in both webflow's preview and on live site. Issue occurs on Chrome, but not Safari or Firefox. Both items show border-radius: 8px in the inspector, but only Item 1 visually shows the effect.

From what I can tell the issue only occurs when the interaction is a transform. I tried it with opacity and width and the issue didn't occur.


#2

same here - any solution...?


#3

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.