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

css.properties.text-align - Doesn't Work On Safari Mobile #25091

Open
gitboy2022 opened this issue Nov 16, 2024 · 0 comments
Open

css.properties.text-align - Doesn't Work On Safari Mobile #25091

gitboy2022 opened this issue Nov 16, 2024 · 0 comments
Labels
data:css 🎨 Compat data for CSS features. https://developer.mozilla.org/docs/Web/CSS

Comments

@gitboy2022
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 Mobile has issues when using text-align property, even if MDN Web Docs says Safari Mobile fully supports text-align.

What browsers does this problem apply to, if applicable?

Safari

What did you expect to see?

Text aligned in the center inside the buttons.

Did you test this? If so, how?

I did test this on my personal portfolio.

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

No.

Do you have anything more you want to share?

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="index.css">
    <link rel="icon" href="icons8-globe-africa-96.png">
    <link rel="apple-touch-icon" href="icons8-globe-africa-96.png">
</head>
<body class="main">
    <p class="title_text">Select Grade</p>

    <div class="grade_select">
        <button class="button">Sixth Grade</button>
        <button class="button">Seventh Grade</button>
        <a href="/8th Grade/8th Grade.html">
            <button class="button">Eighth Grade</button>
        </a>
    </div>
</body>
</html>

index.css

.main {
    background-color: rgb(105, 195, 255);
}

.title_text {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-align: center;
    font-size: 7vw;
}

.button {
    background-color: rgb(175, 50, 215);
    height: 30vw;
    width: 30vw;
    color: #ffffff;
    text-align: center;
    border-radius: 3vw;
    border: 1vw solid black;
    font-size: 7vw;
}

.grade_select {
    display: flex;
    justify-content: space-evenly;
}

.button:hover {background-color: rgb(155, 30, 195);}

.button:active {background-color: rgb(135, 10, 175);}

firefox in fedora 41
Screenshot From 2024-11-16 17-15-47
safari in ios 18.0.1
unnamed

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

MDN metadata

MDN page report details
  • Query: css.properties.text-align
  • Report started: 2024-11-16T21:22:12.315Z
@queengooborg queengooborg added the data:css 🎨 Compat data for CSS features. https://developer.mozilla.org/docs/Web/CSS label Nov 17, 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
2 participants
@queengooborg @gitboy2022