Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

rotate not fully supported by safari browser #23202

Closed
up1512001 opened this issue May 30, 2024 · 1 comment
Closed

rotate not fully supported by safari browser #23202

up1512001 opened this issue May 30, 2024 · 1 comment
Labels
data:css Compat data for CSS features. https://developer.mozilla.org/docs/Web/CSS

Comments

@up1512001
Copy link

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.
Screen.Recording.2024-05-30.at.12.06.15.mov
  • this is the result of the Safari browser.
Screen.Recording.2024-05-30.at.12.11.15.mov

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?

Screen.Recording.2024-05-30.at.12.06.15.mov
Screen.Recording.2024-05-30.at.12.23.15.mov

MDN URL

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

MDN metadata

MDN page report details
  • Query: css.types.transform-function.rotate
  • Report started: 2024-05-30T06:37:26.023Z
@queengooborg queengooborg added the data:css Compat data for CSS features. https://developer.mozilla.org/docs/Web/CSS label May 31, 2024
@queengooborg
Copy link
Contributor

I was not able to replicate the issue on my end in Safari 17.6. I used the following HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta content="width=device-width">
        <style>
            body {
                background-color: white;
                color: black;
            }

            #test {
                border: 10px solid red;
                width: 2.875rem;
            }

            #circle {
                display: none;
            }

            .is-style-rt-close-button .rt-button--element {
                width: 2.875rem;
                height: 2.875rem;
                display: inline-block;
                background-size: contain;
                background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDYiIGhlaWdodD0iNDYiIHZpZXdCb3g9IjAgMCA0NiA0NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCQkJPGNpcmNsZSBjeD0iMjMiIGN5PSIyMyIgcj0iMjIuNSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgNDYgMCkiIHN0cm9rZT0iIzFDMUMxQyIvPgoJCQk8cmVjdCB4PSIxNSIgeT0iMjkuMTQyNiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjEuMzgiIHJ4PSIwLjY5IiB0cmFuc2Zvcm09InJvdGF0ZSgtNDUgMTUgMjkuMTQyNikiIGZpbGw9IiMxQzFDMUMiLz4KCQkJPHJlY3QgeD0iMTYiIHk9IjE1LjE0MjYiIHdpZHRoPSIyMCIgaGVpZ2h0PSIxLjM4IiByeD0iMC42OSIgdHJhbnNmb3JtPSJyb3RhdGUoNDUgMTYgMTUuMTQyNikiIGZpbGw9IiMxQzFDMUMiLz4KCQk8L3N2Zz4=");
                background-repeat: no-repeat;
                transition: transform 0.3s ease-in-out;
                -webkit-transition: transform 0.3s ease-in-out;
                cursor: pointer;
            }

            .is-style-rt-close-button .rt-button--element:hover {
                transform: rotate(90deg);
            }

            .is-style-rt-close-button .rt-button__link {
                display: flex;
            }
        </style>
    </head>
    <body>
        <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>
    </body>
</html>

Either the bug had already been patched, or there's some other styling on your webpage that's causing the issue. I'm noticing that you're using WordPress as your framework, so I have a suspicion the latter is the case.

@queengooborg queengooborg closed this as not planned Won't fix, can't repro, duplicate, stale Sep 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
data:css Compat data for CSS features. https://developer.mozilla.org/docs/Web/CSS
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@queengooborg @up1512001 and others