css.properties.text-align - Doesn't Work On Safari Mobile
Nobody has claimed this yet.
- Dominant language
- JSON
- Stars
- 5.8k
- Forks
- 2.6k
- Avg merge
- 1d 21h
- Merged PRs (30d)
- 186
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by opening the supplied index.html and index.css in Safari on iOS 18.0.1 and Firefox on Fedora 41, then compare the result with the MDN text-align page and its css.properties.text-align report. Confirm whether the observed button alignment is caused by Safari support; done means a reproducible browser-specific result and a justified update or closure.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- documentation, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100