ampproject / ampproject/amphtml

[amp-story-animation] --story-page-vh or --story-page-vw in amp-story-animation causes "Recursive variable" error on Safari Desktop

Open
#38,133 2 comments 0 reactions 0 assignees View on GitHub
P3: When Possible Stale Type: Bug WG: stories
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.