为什么要转换：不透明度会影响％中的填充（在-webkit- browsers中）

Question

在-webkit- browsers中发现了一些奇怪的行为。如果在“％”中给出填充并且我们对子项应用了过渡：不透明效果，则子项在操作和操作中受到影响。如果填充是在px（或em）中，一切都可以。问题只出现在-webkit-浏览器中。 HTML

<div class="red">
    <div class="blue">
        padding in %
    </div>    
</div>
<div class="red1">
    <div class="blue">
        padding in px
    </div>    
</div>

的CSS

.red{
    background-color: red;
    width:100px;
    height:100px;
    padding: 5%;
}
.red1{
    background-color: red;
    width:100px;
    height:100px;
    padding: 20px;
    margin-top: 5px;
}
.blue{
    background-color: blue;
    height:100px;
    opacity: 1;
}
.blue:hover{
    opacity:0.5;
    transition: opacity 0.5s linear;
}

例如：http://jsfiddle.net/48jUg/3/

P.S。当浏览器窗口的宽度介于1050和1200像素之间时，似乎会出现问题