Javascript Webkit错误：将子元素大小调整为匹配大小后自动触发溢出

我有以下简单的设置：

document.getElementById（'inner'）.addEventListener（'click'，（{target}）=>{
target.classList.add（'match'）；
});
#容器{
背景：绿色；
溢出：自动；
宽度：200px；
高度：100px；
}
#内在的{
宽度：210px；
高度：110px；
}
#内部匹配{
宽度：200px；
高度：100px；
}
从所有的浏览器测试来看，这个问题似乎是可复制的，并且与基于webkit的浏览器无关

我建议查看webkit是否存在未结问题，或提交错误报告：

似乎和你的问题有关。除了操纵父元素（您所说的不实用）之外，我不确定是否有任何变通方法。
在应用样式后，将使用一种不涉及对父元素寻址的变通方法


document.getElementById（'inner'）.addEventListener（'click'，（{target}）=>{
target.classList.add（'match'）；
//强制重画
target.style.display='none'；
target.offsetHeight；//没有此选项将无法工作
target.style.display=''；
});
#容器{
背景：绿色；
溢出：自动；
宽度：200px；
高度：100px；
}
#内在的{
宽度：210px；
高度：110px；
}
#内部匹配{
宽度：200px；
高度：100px；
}
以下是三种解决Chrome中此问题的解决方案

解决方案1
解决方案2
解决方案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关键帧动画{
从{宽度：180px；高度：100px；}
至{宽度：200px；高度：100px；}
}
要删除滚动条，需要重新绘制父$（'.c'）元素。但是简单的隐藏（style=“display:none；”），然后显示（style=“display:block；”）根本没有效果。
通过更新溢出属性，您需要检查每次更新的宽度和高度，并根据条件更改溢出属性的值

尝试下面的代码

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

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

我尝试了值为0的jquery slideUp（）和slideDown（）方法。它在windows chrome和safari上运行良好。我希望它也能在Mac的浏览器上运行。
仅供参考：对于值为0的jquery hide（）和show（）方法，它也可以正常工作
 如何将父元素设置为溢出：单击时隐藏？我使用的是OS X上的同一版本的Chrome，无法在您的JSFIDLE中重现该问题。@A但这是我希望避免的事情，因为我的内容将放在我无法控制的DOM中。虽然这可能是一个解决办法，但实际上并不能解决或解释这个问题。我无法在OS X 10.10上的Chrome 39.0.2171.95中重现这个问题。你可能有任何可能干扰的扩展吗？我能够在我的实验室Mac（OS X 10.10）上复制它，运行Chrome（相同版本）和Safari 8。不确定为什么我的便携式电脑没有问题。在Windows上的Firefox 34.0.1中进行了测试，没有出现问题。在Windows上的Opera 26.0.1656.32中测试，出现问题。在Windows上的Safari 5.1.7中进行了测试，出现了问题。从所有这些测试来看，它似乎是特定于Webkit的。非Webkit浏览器没有问题。很好的发现。虽然这肯定是有用的，但我不认为使用百分比总是一种选择（因为这种错误可能发生在各种设置中）。我相信，和其他人一样，这确实是Webkit中的一个错误（可能也应该在Safari中重现？）。当你将尺寸缩小20个像素（大约一个滚动条的大小）时，它突然适应了，两个滚动条都消失了。当然，在一维中留下20px的间隙。我在div中添加了
box size:border box
，问题仍然存在。看起来像一个bug，显示像bug，一定是bug。这个问题在Safari中是可以重现的，这在问题中已经有记录。这并不能解决问题，因为它最终导致子元素小于父元素。这也是我自己尝试过的一个选项。它可以工作-大部分时间-但有时小超时不够长，需要两次点击才能工作。这意味着在其他一些系统上可能需要大量的迭代才能工作。我在寻找一种永远有效的方法。我不认为任意增加延迟是一个好的解决方案。这是正确的。你需要这样做。您可以使用jQuery hide/offset/show函数。@SalmanA感谢您的链接，它准确地解释了解决方法的工作原理。请在回答之前阅读完整的问题。我正在寻找一种不针对家长的解决方案。
$('.i').on('click', function() {
    var t = $(this);
    t.css({
        width: '100%',
        height: '100%',
        '-webkit-animation': 'animate 0.01s, linear'
   });
});

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

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