css.properties.text-align - Doesn't Work On Safari Mobile #25091
Description
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
safari in ios 18.0.1
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