表格單元格內的陰影會導致滾動條顯示

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)); 
}