Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Carousel: radius lost on transition

  • Hi,

    Please take a look at this page:

    https://fadomagazine.com/fado-houses/fado-houses/porto/fado-maior-do-porto/

    I’m having an issue with the GenerateBlocks Carousel block. I’ve applied a border-radius to the images, but it disappears (returning to sharp corners) during the slide transition animation. It only reappears once the movement stops.

    Key details:

    Context: This carousel is loaded via a GP Element (Content Template).

    The Issue: overflow: hidden seems to fail during the CSS transform/translate animation.

    What I’ve tried: I applied border-radius and overflow: hidden to both .gb-carousel-item and the img using !important, along with hardware acceleration (translateZ), but the flicker persists.

    Goal: I need the corners to stay rounded (4px on desktop, 12px on mobile) consistently during the entire animation.

    Could you please check if there is a specific fix for this?

    Thank you!

  • Hi there,

    Can you try applying the border radius to the Carousel block itself?

  • Hi,

    Sure!

    It workek, forget that there were severeal level of boarders, container, carousel, etc.

    Thanks.

  • No problem! 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.