css.at-rules.starting-style - Safari only applies rule on load and not on new elements added to the DOM
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 is reported to support this but I do not believe it does.
What browsers does this problem apply to, if applicable?
Safari (I am using 17.6)
What did you expect to see?
When I added a square to the DOM, it should have applied the @starting-styles. It did not. It did apply them on load, but not on add.
Did you test this? If so, how?
I tested it by running this code through Live Server within Safari and Chrome. You will want to pull it up then navigate to the /transitions page. This is part of a course I am taking on Udemy.
Can you link to any release notes, bugs, pull requests, or MDN pages related to this?
No, I think Safari is probably a private repo. Here is the MDN page though: https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style
Do you have anything more you want to share?
.square {
width: 100px;
height: 100px;
background-image: linear-gradient(purple, yellow);
transition: display 0.5s allow-discrete, opacity 0.5s, transform 0.5s;
}
@starting-style {
.square {
opacity: 0;
transform: scale(0);
}
}
.square.hide {
display: none;
opacity: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Transitions</title>
<link rel="stylesheet" href="styles.css" />
<script>
document.addEventListener("DOMContentLoaded", () => {
const element = document.querySelector(".square");
const addButton = document.querySelector(".add-square");
addButton.addEventListener("click", () => {
const newSquare = document.createElement("div");
newSquare.classList.add("square");
document.querySelector(".wrapper").appendChild(newSquare);
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="square"></div>
</div>
<button class="add-square">Add Square</button>
</body>
</html>
https://github.com/user-attachments/assets/9650e910-e5f9-492f-929c-a8f876caa99f
MDN URL
https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style
MDN metadata
MDN page report details
- Query:
css.at-rules.starting-style - Report started: 2025-01-13T18:37:06.489Z
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 with the css.at-rules.starting-style entry in the browser compatibility data and reproduce the supplied /transitions example in Safari 17.6, comparing it with Chrome and the linked MDN page. Update the compatibility information only if the reproduction confirms the reported behavior, then verify that the entry accurately describes Safari support for dynamically added elements.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- documentation
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100