What type of issue is this?

Browser bug (a bug with a feature that may impact site compatibility)

What information was incorrect, unhelpful, or incomplete?

safari does not fully support the rotate property.

What browsers does this problem apply to, if applicable?

Safari

What did you expect to see?

• this is the result of the Chrome browser.

• this is the result of the Safari browser.

If you see the same result for both of the above videos you can notice that on Safari for rotate it causes a slight element right shift but not on Chrome.

Did you test this? If so, how?

<div role="button" style="justify-content:left" tabindex="0" aria-label="menu button" class="wp-block-rt-blocks-button wp-block-rtcamp-2024-button rt-mega-menu--items rt-mega-menu--btn__close is-style-rt-close-button" aria-expanded="true" aria-hidden="false">
    <div class="rt-button__link">
        <div class="rt-button--element"></div>
    </div>
</div>

.is-style-rt-close-button {

	.rt-button--element {
		width: 2.875rem;
		height: 2.875rem;
		display: inline-block;
		background-size: contain;
		background-image: url(../svg/header/menu-close.svg);
		background-repeat: no-repeat;
		transition: transform 0.3s ease-in-out;
		-webkit-transition: transform 0.3s ease-in-out;
		cursor: pointer;

		&:hover {
			transform: rotate(90deg);
		}
	}

	.rt-button__link {
		display: flex;
	}
}

<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="22.5" transform="matrix(-1 0 0 1 46 0)" stroke="#1C1C1C"/>
<rect x="15" y="29.1426" width="20" height="1.38" rx="0.69" transform="rotate(-45 15 29.1426)" fill="#1C1C1C"/>
<rect x="16" y="15.1426" width="20" height="1.38" rx="0.69" transform="rotate(45 16 15.1426)" fill="#1C1C1C"/>
</svg>

Can you link to any release notes, bugs, pull requests, or MDN pages related to this?

This is an MDN page related to the rotate property.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate

Do you have anything more you want to share?

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate

MDN metadata