Почему изменения переменной в CSS не отражаются на странице?

Почему переменная zoom не изменяется при каждом последующем нажатии кнопки уменьшения/увеличения, если добавлена строка :style="{ transform: `scale(${zoom})` }"?
  • 22 апреля 2024 г. 14:10
Ответы на вопрос 2
1. Причина того, что изменения переменной в CSS не отражаются на странице, может быть связана с использованием переменных в CSS не корректно. Например, если переменная используется внутри селектора, который не поддерживает кастомные свойства (например, не внутри :root), браузер может просто не применить эту переменную.

2. По поводу переменной zoom, которая не изменяется при каждом последующем нажатии кнопок уменьшения/увеличения, возможно, это связано с тем, что при изменении зума с помощью трансформации масштаба (scale), масштаб применяется к исходному размеру элемента, а не к текущему масштабу. То есть, каждое последующее применение трансформации масштаба умножает исходный размер на заданный масштаб, а не на текущий масштаб. Для того чтобы учесть предыдущий масштаб, необходимо каждый раз умножать текущий масштаб на новое значение zoom.
Когда scale становится 2 он перекрывает твои кнопки. 
Добавь для примера margin-top: 30px; для div
Похожие вопросы