Clickable area moves away from its content after CSS rotation

Simon A. Eugster 0
Viewed 18

I have a Chrome specific issue with this collapsible tile.

enter image description here

The expand button is a div with an onClick event handler and cursor: pointer in CSS. When collapsed, it is rotated by 90 degrees.

  • In Firefox (100) and Safari, the button behaves as expected, i.e. the button is clickable and expands the tile again.
  • In Chrome (105), the button is not clickable, but the area below it, as in the screenshot above.

Why is this? Does not make sense to me when the div is where it should be but its cursor: pointer and onClick area are somewhere else.

google-chrome css
1 Answers

I fixed this issue personally by using css transform instead of rotate

in example, here is a before and after

.expand-button {
    /* other css... */
    /* old css
    transition: rotate 0.5s;
    */
    transition: transform 0.5s;
    &.collapsed {
        /* old css
        rotate: -90deg;
        */
        tranform: rotate(-90deg);
    }
}

I can't quite tell you why this fixes it in chrome, but it does hopefully that helps.

async await0
Related