Astro Info
Astro v6.4.7
Vite v7.3.2
Node v24.16.0
System Linux (x64)
Package Manager npm
Output static
Adapter none
Integrations none
If this issue only occurs in one browser, which browser is a problem?
All
Describe the Bug
This Issue was already posted but closed with the statement:
"Please open a new issue if you still have this problem" here: #16308
So here is the repost, due to the bug still existing in the latest (v6.4.7) astro version.
The following bug report refers to the Astro 6 development environment. This issue neither occurs in an Astro 5 development environment nor in a vite development environment (without Astro).
After updating a CSS value while the dev server is running, a CSS transition is unexpectedly triggered on every page reload in Astro, even though the value does not change at runtime (i.e. nothing changes from the browser’s point of view during the page lifecycle).
This results in a transition being triggered that should not exist.
This behavior is incorrect: the browser should not animate anything on load if the value has not changed during the lifetime of the page.
Steps to reproduce
Define an animatable CSS property with a transition.
Start the Astro dev server.
Change the property's value in CSS (e.g. from scale: 3 to scale: 0).
Refresh the page (F5 or Ctrl+Shift+R).
Expected behavior
- On page load, the element should immediately render with the current CSS value (scale: 0 in this example).
- No transition should occur, because there is no value change during runtime.
- The browser should not have any knowledge of previous values before the reload.
Actual behavior
- On every refresh, a transition is triggered.
- The browser animates from the value that existed when the dev server was started (e.g. scale: 3) to the current CSS value (scale: 0).
- This happens even though the value is static during the page lifecycle.
Why this is a problem
This suggests that some previous state is being preserved across reloads in the dev environment, which should not happen.
The browser behaves as if there was a value change, even though:
- the page was fully reloaded
- and no runtime mutation occurred
Additional issue (JavaScript interaction)
When triggering a transition via JavaScript (e.g. inline styles or class changes), by setting the value to scale: 1.5:
- If you change the CSS value to scale: 0 while the dev server is running and then reload the page, setting scale: 1.5 in JavaScript still causes a transition from scale: 3 to scale: 1.5 (shrinking), instead of from scale: 0 to scale: 1.5 (growing).
- The animation starts from the initial dev-server value (e.g. scale: 3), not from the current CSS value (e.g. scale: 0).
- The actual current value defined in CSS is ignored.
- This clearly shows that the initial value at dev server start is incorrectly used as the animation starting point.
Reproduction example
---
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<div class="box" id="box"></div>
</body>
</html>
<style>
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100dvh;
display: flex;
justify-content: center;
align-items: center;
}
.box {
background-color: blue;
height: 33%;
width: 33%;
scale: 3;
transition: scale 3s linear;
}
</style>
<script>
const box = document.getElementById("box")!;
box.style.scale = "1.5";
</script>
Notes
- This only occurs in the dev server (HMR environment).
- It appears that an initial style state is being retained across reloads, which leads to incorrect transition behavior.
- The core issue is that a transition is triggered even though no change occurs during page execution.
What's the expected result?
- On page load, the element should immediately render with the current CSS value (scale: 0 in this example).
- No transition should occur, because there is no value change during runtime.
- The browser should not have any knowledge of previous values before the reload.
What's the expected result?
On page load, the element should immediately render with the current CSS value (scale: 0 in this example).
No transition should occur, because there is no value change during runtime.
The browser should not have any knowledge of previous values before the reload.
Link to Minimal Reproducible Example
https://github.com/PanRoR/astro-6-css-transition-on-refresh
Participation
Astro Info
If this issue only occurs in one browser, which browser is a problem?
All
Describe the Bug
This Issue was already posted but closed with the statement:
"Please open a new issue if you still have this problem" here: #16308
So here is the repost, due to the bug still existing in the latest (v6.4.7) astro version.
The following bug report refers to the Astro 6 development environment. This issue neither occurs in an Astro 5 development environment nor in a vite development environment (without Astro).
After updating a CSS value while the dev server is running, a CSS transition is unexpectedly triggered on every page reload in Astro, even though the value does not change at runtime (i.e. nothing changes from the browser’s point of view during the page lifecycle).
This results in a transition being triggered that should not exist.
This behavior is incorrect: the browser should not animate anything on load if the value has not changed during the lifetime of the page.
Steps to reproduce
Define an animatable CSS property with a transition.
Start the Astro dev server.
Change the property's value in CSS (e.g. from scale: 3 to scale: 0).
Refresh the page (F5 or Ctrl+Shift+R).
Expected behavior
Actual behavior
Why this is a problem
This suggests that some previous state is being preserved across reloads in the dev environment, which should not happen.
The browser behaves as if there was a value change, even though:
Additional issue (JavaScript interaction)
When triggering a transition via JavaScript (e.g. inline styles or class changes), by setting the value to scale: 1.5:
Reproduction example
Notes
What's the expected result?
What's the expected result?
Link to Minimal Reproducible Example
https://github.com/PanRoR/astro-6-css-transition-on-refresh
Participation