Trying to animate grid-row and grid-column to make an item move around a CSS grid.
It works great as long as I don't use a custom property for the grid size.
If I do, the item jumps between corners on Firefox. Works fine in Chromium.
Left: Chrome
Right: Firefox
See: https://codepen.io/captainbrosset/pen/YPqopPj?editors=0100
Patrick Brosset
npub152…9te0s
2025-12-16 13:51:51 UTC
Author Public Key
npub152kz2y0wqm24ewq7fnsfdqyth0agslpd7z0426zu62uqm76vy70s49te0sSeen on
wss://relay.momostr.pinkPublished at
2025-12-16 13:51:51 UTCEvent JSON
{
"id": "d8547ab976cfbd64d3eb8e083978fa1a3d50524e4e5f05cec8ff63c61476b737",
"pubkey": "a2ac2511ee06d55cb81e4ce096808bbbfa887c2df09f55685cd2b80dfb4c279f",
"created_at": 1765893111,
"kind": 1,
"tags": [
[
"proxy",
"https://mas.to/@patrickbrosset/115729570929723418",
"web"
],
[
"imeta",
"url https://media.mas.to/media_attachments/files/115/729/568/699/537/096/original/85aa4059a2de0f52.mp4",
"m video/mp4"
],
[
"proxy",
"https://mas.to/users/patrickbrosset/statuses/115729570929723418",
"activitypub"
],
[
"L",
"pink.momostr"
],
[
"l",
"pink.momostr.activitypub:https://mas.to/users/patrickbrosset/statuses/115729570929723418",
"pink.momostr"
],
[
"-"
]
],
"content": "Trying to animate grid-row and grid-column to make an item move around a CSS grid.\nIt works great as long as I don't use a custom property for the grid size.\nIf I do, the item jumps between corners on Firefox. Works fine in Chromium.\n\nLeft: Chrome\nRight: Firefox\n\nSee: https://codepen.io/captainbrosset/pen/YPqopPj?editors=0100\nhttps://media.mas.to/media_attachments/files/115/729/568/699/537/096/original/85aa4059a2de0f52.mp4\n",
"sig": "8a98ceaa7409fc29aa4d42540e91749b2bb251f109b90328f527b5b655b39095b1c53565c098096dadd2318cb189e25ce6fbe4acc8d67e4b6bd338add963b11a"
}