Ошибка Webkit: автоматический запуск переполнения после изменения размера дочернего элемента до соответствующего размера

У меня есть следующая простая настройка:

document.getElementById('inner').addEventListener('click', ({ target }) => {
  target.classList.add('match');
});

#container {
  background: green;
  overflow: auto;
  width: 200px;
  height: 100px;
}

#inner {
  width: 210px;
  height: 110px;
}

#inner.match {
  width: 200px;
  height: 100px;
}

<div id="container">
  <div id="inner"></div>
</div>

Ответ 1

Обходной путь, который не связан с адресацией родителя, заключается в принудительно перерисовать браузер после применения стилей.

document.getElementById('inner').addEventListener('click', ({ target }) => {
  target.classList.add('match');
  //Force redraw
  target.style.display='none';
  target.offsetHeight; //Won't work without this
  target.style.display='';
});

#container {
  background: green;
  overflow: auto;
  width: 200px;
  height: 100px;
}

#inner {
  width: 210px;
  height: 110px;
}

#inner.match {
  width: 200px;
  height: 100px;
}

<div id="container">
  <div id="inner"></div>
</div>

Ответ 2

Ниже приведены три решения, которые устраняют эту проблему в Chrome.

Решение 1

$('.i').on('click', function() {
    var t = $(this);
    t.css({
        width: '100%',
        height: '100%'
   });
});

Решение 2

$('.i').on('click', function() {
    var t = $(this);
    t.css({
        width : '200px',
        height : '100px',
        zoom : 0.5
   });
    setTimeout(function(){
    t.css({
        zoom : 1
    })}, 1);    
});

Решение 3

Работает с анимацией

$('.i').on('click', function() {
    var t = $(this);
    t.css({
        width: '100%',
        height: '100%',
        '-webkit-animation': 'animate 0.01s, linear'
   });
});

Добавить в CSS:

/* Chrome, Safari, Opera */
@-webkit-keyframes animate {
    from {width: 180px; height: 100px;}
    to {width: 200px; height: 100px;}
}

Ответ 3

Чтобы удалить панель прокрутки, вам нужно перерисовать элемент parent $('. c'). Но simple hide (style = "display: none;" ), а затем show (style = "display: block;" ) не имеет никакого эффекта. Обновляя свойство переполнения, вам нужно каждый раз проверять, какую ширину и высоту вы обновляете, и на основе условий вам нужно изменить значение свойства переполнения.

Попробовать код ниже

$('.i').on('click', function() {
    var t = $(this);
    t.css({
        width: 200,
        height: 100
    })

    $('.c').slideUp(0).slideDown(0); // added
});

Я попробовал jquery slideUp() и методы slideDown() со значением 0. Его работа отлично работала на хромированных окнах и сафари. Надеюсь, он также будет работать на Mac-браузере. FYI: он также отлично работает с методами jquery hide() и show() со значением 0.

Ответ 4

Судя по всему тестированию браузеров, эта проблема воспроизводима и изолирована для браузеров, основанных на webkit.

Я рекомендую посмотреть, есть ли открытый тикет с помощью webkit, или подать отчет об ошибке: https://bugs.webkit.org/

Этот старый билет, похоже, связан с вашей проблемой. Помимо манипулирования родительским элементом (который, как вы заявили, нецелесообразно), я не уверен, что есть какие-то обходные пути.