ampproject / ampproject/amphtml
[amp-story-animation] --story-page-vh or --story-page-vw in amp-story-animation causes "Recursive variable" error on Safari Desktop
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
### Description
If you use an amp-story-animation element using `var(--story-page-vh)` or `var(--story-page-vw)` in a story, the animation doesn't work on macOS Monterey 12.3.1, Safari 15.4. I can confirm it worked on macOS Catalina before I upgraded, and it also works on Chrome and Firefox.
Here is an example amp-story-animation that causes the issue:
```
{
"selector": "[data-custom-animation-id=\"fly-in-top-0-0.5\"]",
"--x": "0",
"--y": "calc(-100 * var(--story-page-vh) - height())",
"animations": [
{
"duration": "0s",
"keyframes": [
{"transform": "translate(var(--x), var(--y))"},
{"transform": "translate(var(--x), var(--y))"}
]
},
{
"delay": "0s",
"duration": "0.5s",
"easing": "cubic-bezier(0.2, 0.6, 0.0, 1)",
"keyframes": [
{"transform": "translate(var(--x), var(--y))"},
{"transform": "translate(0, 0)"}
]
}
]
}
```
### Reproduction Steps
The second page on this amp-story demos the issue: https://echo.nws.press/115802/
The two text containers are meant to be animated with custom fly-in animations.
If I change the --story-page-vh to simply use 1vh, the animation works again. Demonstrated here: https://echo.nws.press/115801/
### Relevant Logs
```shell
[Error] Recursive variable: "--story-page-vh"
In (v0.mjs:2:37408)
(función anónima) (v0.mjs:2:205280)
(función anónima)
D (v0.mjs:2:4174)
getVar (amp-animation-0.1.mjs:2:68119)
calc (amp-animation-0.1.mjs:2:12851)
calc (amp-animation-0.1.mjs:2:13892)
calc (amp-animation-0.1.mjs:2:13256)
mS (amp-animation-0.1.mjs:2:67802)
(función anónima) (amp-animation-0.1.mjs:2:65134)
withVars (amp-animation-0.1.mjs:2:67185)
YR (amp-animation-0.1.mjs:2:65064)
(función anónima) (amp-animation-0.1.mjs:2:63919)
withTarget (amp-animation-0.1.mjs:2:67103)
(función anónima) (amp-animation-0.1.mjs:2:63836)
forEach
QT (amp-animation-0.1.mjs:2:63782)
onMultiAnimation (amp-animation-0.1.mjs:2:61574)
scan (amp-animation-0.1.mjs:2:60681)
(función anónima) (amp-animation-0.1.mjs:2:61396)
withVars (amp-animation-0.1.mjs:2:67185)
resolveRequests (amp-animation-0.1.mjs:2:61372)
(función anónima) (v0.mjs:2:141395)
Co (v0.mjs:2:137549)
Gh (v0.mjs:2:142260)
Gh
be (v0.mjs:2:83076)
(función anónima) (v0.mjs:2:82822)
(función anónima) (v0.mjs:2:114982)
```
### Browser(s) Affected
Safari
### OS(s) Affected
macOS Monterey 12.3.1
### Device(s) Affected
_No response_
### AMP Version Affected
_No response_
Contributor guide
Research direction
Start at the amp-story-animation entry point and follow its interaction with the amp-animation runtime, reproducing the second-page example in Safari 15.4 on macOS Monterey. Compare the failing --story-page-vh and --story-page-vw cases with the working 1vh version and inspect the reported recursive-variable path. Done means the custom animation works without a Recursive variable error in Safari while preserving behavior in other browsers.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100