表格单元格内的阴影会导致滚动条显示

Question

我已将Google Chrome更新至版本61.0.3163.100。

事实证明，基于Bootstrap的响应表不再正确显示。我有一个输入元素放置在一个表格单元格内。输入元素具有窗体控件类，因此box-shadow显示在焦点事件上，但从版本61.0开始，还显示了一个滚动条。我无法弄清楚为什么滚动条会显示出来，尽管表格单元格可以简单地以滚动条不必要的方式扩展 - 它发生在早期版本的Chrome上。此外，它仍然可以在Firefox和IE上正常工作。

我做了一个样本：https://jsfiddle.net/gstm/1zxfjo75/1/ （如果你点击输入，滚动条会显示）

<!-- Tested with Bootstrap v3.3.7 --> 
<div class="table-responsive"> 
    <table class="table"> 
     <thead> 
     <tr> 
      <th>Column 1</th> 
      <th>Column 2</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <td>Lorem ipsum</td> 
      <td><input type="text" class="form-control" /></td> 
     </tr> 
     </tbody> 
    </table> 
</div> 

在我看来，以前的行为似乎比当前一个比较合理的。这是一个错误吗？你会建议什么解决方法？

请注意，设置溢出x：隐藏不是一个解决方案，因为我仍然需要利用Bootstrap提供的响应表（可能在小屏幕上显示大表）。

Answer 1

Box Shadow离开屏幕，因此添加了滚动以显示整个区域。如果你的输入有更多的余量，你不会注意到这一点。一个解决方案是稍微调整你的盒子影子尺寸：

box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 7px rgba(102,175,233,.6); 

这对我来说是在开发者工具中。

另一种解决方案是在此输入的父项<td>周围添加padding: 10px;。这将允许有足够的空间来显示整个盒子阴影。

Answer 2

如果您删除box-shadow并使用filter：drop-shadow，则不会出现此问题。

.form-control:focus { 
    box-shadow: 0; 
    filter: drop-shadow(0 0 8px rgba(102,175,233,.6)); 
}