Chrome boxshadow и border конфликтующие

Question

У меня, похоже, проблема с Chrome, а не с FF или IE. Если у меня есть DIV

<div id = "someDiv"> 
    <input name = "row1" type = "radio" value = "Y">Y 
    <input name = "row1" type = "radio" value = "N">N 
    <div id = "hiddenRow1"></div> 
    <div id = "hiddenRow2"></div> 
</div> 

И CSS, как этот

#someDiv { 
width: 600px; 
padding-top: 3%; 
background-color: rgba(24, 25, 27, 0.98); 
-webkit-box-shadow: 0px 4px 8px 4px rgba(0,0,0,0.28); 
-moz-box-shadow: 0px 4px 8px 4px rgba(0,0,0,0.28); 
box-shadow: 0px 4px 8px 4px rgba(0,0,0,0.28); 
border: 1px solid #8D3232; 
} 

.hiddenRow1, .hiddenRow2 { 
    display:none; 
} 

И мы делаем некоторые JQuery как этот

$('input[name="row1"]').on('change', function(){ 
     var yesno = $(this).val(); 
     if (yesno == "Y"){ 
      $('#hiddenRow1').slideDown(500); 
      $('#hiddenRow2').slideUp(500); 
     }else{ 
      $('#hiddenRow1').slideUp(500); 
      $('#hiddenRow2').slideDown(500); 

     } 
    }); 

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

Единственный способ, котор я могу разрешить это покупка извлекающ тень коробки главного div, но я не хочу сломать тип вебсайта. Я не могу воспроизвести это на jsfiddle, но у меня есть скриншот.

Любые идеи?

http://i.imgur.com/ZCrvSNd.png

Answer 1

Чтобы исправить это, я сделал еще один DIV, который содержит первый скрытый ряд. Я дал ему фон, который был размером и цветом фона div. Таким образом, он просто перекрывает багги.