border-radius not working since last update

[TYLM]

Hello there,

I just noticed that the border-radius on some of my rows stopped working after the last update. I have a .spaceRow class applied to certain rows, which are supposed to have a border-radius of 0.5vw by default and 100% on hover. However, the rows now have straight corners, and nothing happens on hover. The problem seems to only exist for the overlay/page “Spaces.”

Could you help me figure out what's causing this issue?

https://office.theomarielle.com/

Thanks!

[arminunruh]

you also need to target

.row-inner{}

so do:

.spaceRow .row-inner{
border-radius: 10px;
}

[TYLM]

Ok so I just did that but it doesn't change anything

[arminunruh]

ah yea i was wrong

just do:

.row.spaceRow{
    border-radius: 20px;
    overflow: hidden;
}

[TYLM]

Thanks a lot ! It works again now :)

[TYLM]

Hello there,

Actually, I noticed a different issue: when hovering over the corners of .row.spaceRow divs, they glitch because the hoverable surface changes size dynamically. This causes the border-radius transition to repeatedly toggle, creating a flickering effect.

Has anyone experienced this before? Any idea how to prevent the hover from being interrupted in the corners?

Thanks in advance for your help!

[arminunruh]

idk what u mean for me it looks like this:
https://www.dropbox.com/scl/fi/tdllv0lcjgup0wth2qfey/Screen-Recording-2025-03-31-at-17.22.32.mov?rlkey=oa6xb4cezc9zux5rmdcban1oc&st=fxw9gsn7&dl=0

can u do a video or screenshots to explain

[TYLM]

Here's a video https://www.dropbox.com/t/5R662Fbuq9sUPrGt

Btw I'm using Firefox if that's useful

[arminunruh]

did you put wrong custom height here?
in right click row - set custom height

%px is invalid css

change your css to be more like this:

.row.spaceRow{
background-color: transparent!important;
}
.row.spaceRow .row-inner{
border-radius: var(--borderRadius);
}
.row.spaceRow:hover .row-inner{
border-radius: var(--borderRadiusFull);
}

dont put your border radius on row, instead use it on row-inner

then use we use the hover on .row to style .row-inner

my guess is firefox changes the boundary boxes of where :hover is applicable when the box gets round.
doing the above we can circumvent this. cause .row's box will stay the same, only the inner .row-inner radius will change.

both .row-inner and .row use the background color. by setting the .row bg color to transparent, we make sure only the bg color of the div that gets rounded during the animation is in use

[TYLM]

I understand the logic – though applying a border-radius on .row-inner doesn't seem to work for some reason

[arminunruh]

u need to apply background: transparent!important; to .row

and overflow: hidden to .row-inner

probably the overflow: hidden was missing

.row.spaceRow{
background-color: transparent!important;
}
.row.spaceRow .row-inner{
border-radius: var(--borderRadius);
overflow: hidden!important;
}
.row.spaceRow:hover .row-inner{
border-radius: var(--borderRadiusFull);
}

try to remove your css for that and use the css above

[TYLM]

It works perfectly now! Thanks a lot for your help @arminunruh :)