Аналог zoom в css? Свойство transform: scale() как свойство zoom

Question

В css есть свойство zoom, оно делает то, что нужно, но нет поддержки в браузерах (в частности Firefox).

Так же есть свойство transform: scale(), но дело в том, что блок main_div становится видимым при использовании transform: scale(), чего нет при использовании свойства zoom. Мне нужно именно такое поведение

Может свойство transform: scale() можно применить таким образом, чтобы он работал как zoom?

Или какие аналоги есть у свойства zoom?

Как быть в этой ситуации?

Здесь мой код. Проверять нужно в Google Chrome, т.к. в Firefox свойство zoom не работает. https://jsfiddle.net/tj2349f5/1/

let test_button = document.querySelector('input.test_button');
test_button.addEventListener('click', () => {
  //second_div.style.transform = 'scale(0.5)';
  second_div.style.zoom = 0.5;
});

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

div {
    display: flex;
}

div#main_div {
  display: block;
  margin: 10px auto;
    height: 80vh;
    width: 80vw;
    background: red;
    overflow: scroll;
}


div#second_div {
    height: 3000px;
    width: 3000px;
    background: green;
  transform-origin: 0% 0%;
}

<div id='main_div'>
  <div id="second_div">Hello</div>
</div>
<input class="test_button" type="button" name="button_name" value="test">

Answer 1

Вы можете попробовать повесить transform: scale(n) на body и затем принудительно установить ширину body так, чтобы он вписался в область видимости окна.

Например, можно отмасштабировать таким образом в 2 раза:

body {
  transform: scale(2);
  width: calc(100vw / 2);
}

Возможно, дополнительно потребуется добавить смещение:

transform: scale(2) translateX(50vw);

Answer 2

Я бы решил так

let test_button = document.querySelector('input.test_button');
test_button.addEventListener('click', () => {
  span.classList.add('active');
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div {
  display: flex;
}

div#main_div {
  display: block;
  margin: 10px auto;
  height: 80vh;
  width: 80vw;
  background: red;
  overflow: scroll;
}

div#second_div {
  height: 3000px;
  width: 3000px;
  background: green;
}

span {
  transform-origin: 0% 0%;
}

.active {
  transform: scale(0.5);
}

<div id='main_div'>
  <div id="second_div"><span id="span">Hello</span></div>
</div>
<input class="test_button" type="button" name="button_name" value="test">

БЛОГ НА HUSL

Аналог zoom в css? Свойство transform: scale() как свойство zoom

Ответы (2 шт):