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

Community resources Bugs
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: Border-radius Issue GIF | Gfycat

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.

1 Like
2

same here - any solution…?

3

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