Функция масштабирования в Firefox ⇐ CSS

[Anonymous]

Я работаю над мозаичным макетом, в котором я хочу, чтобы плитки случайным образом увеличивались в два раза. Это отлично работает в браузере типа Chromium, но не в Firefox.
В большинстве браузеров работает следующее:
scale: 2;

Что не работает в Firefox:
:root {
--tile-count-width: 3;
--tile-count-height: 3;
--tile-gap: 12px;
--tile-size:
calc((100vw - (var(--tile-count-width) + 1) * var(--tile-gap)) / var(--tile-count-width));
}
scale: calc((var(--tile-size) * 2 + var(--tile-gap)) / var(--tile-size));

Причина расчета заключается в том, что Calc(2) не учитывает размер пробела в сетке.
Полный код:



1


2


3


4


5


6





container {
--tile-count-width: 3;
--tile-count-height: 3;
--tile-gap: 12px;
--tile-size:
calc((100vw - (var(--tile-count-width) + 1) * var(--tile-gap)) / var(--tile-count-width));
max-width: fit-content;
margin: auto;
display: grid;
gap: var(--tile-gap);
grid-template:
repeat(var(--tile-count-height), var(--tile-size)) / repeat(var(--tile-count-width), var(--tile-size));
}

container>div {
position: relative;
}

container>div .inner {
position: absolute;
top: 0;
left: 0;
width: var(--tile-size);
height: var(--tile-size);
background-color: yellow;
transform-origin: top left;
transition: scale 0ms ease-in-out;
}

container>div[large] {
grid-column: span 2;
grid-row: span 2;
}

container>div[large] .inner {

transition: scale 1s ease-in-out;

scale: calc((var(--tile-size) * 2 + var(--tile-gap)) / var(--tile-size));
}

const container = document.querySelector('container');
const gridTemplate = getComputedStyle(container).gridTemplate;
const columnPart = gridTemplate.split('/')[1].trim();
const columnRepeatValue = parseInt(columnPart.match(/\d+/)[0]);

const tiles = document.querySelectorAll("container>div");

let sourceIndex = 0;
let currentIndex = 0;

const interval = setInterval(() => {
let i;
do {
i = Math.floor(Math.random() * (tiles.length-(columnRepeatValue-2)));
} while(i==sourceIndex || (i + 1) % columnRepeatValue === 0);

const sourceTile = tiles[sourceIndex];
const targetTile = tiles;

if (sourceTile && targetTile) {
const largeValue = sourceTile.getAttribute("large");

if (largeValue !== null) {
sourceTile.removeAttribute("large");
targetTile.setAttribute("large", largeValue);
sourceIndex = i;

}
}

currentIndex++;
}, 3000); // 1 second delay between each iteration


Подробнее здесь: https://stackoverflow.com/questions/798 ... in-firefox