Chrome框阴影插入rgba bug

Question

我遇到了一个我无法解决的奇怪错误。 我有一个div背景，包括一个css背景图像和一个盒子阴影，用rgba覆盖盒子阴影以使背景变暗..

首次加载时，看起来很好，但是当我将鼠标悬停在按钮元素上时，它会改变整行的rgba。非常奇怪。

HTML：

<div class="jumbotron" id="bigimage" style="background-image: url(http://s3-ak.buzzfeed.com/static/2014-06/25/22/campaign_images/webdr07/the-one-detail-you-missed-from-captain-america-th-2-1617-1403749709-24_dblbig.jpg);">
    <div class="container">
         <h1 id="maintitle">The One Detail You Missed From "Captain America: The Winter Soldier"</h1>
 <a class="btn btn-lg btn-success" href="http://www.buzzfeed.com/javiermoreno/the-one-detail-you-missed-from-captain-america-the-winter-so" id="mainlink" role="button">Read more</a>
    </div>
</div>

CSS：

#bigimage {
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 610px 155px inset;
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 610px 155px inset;
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 610px 155px inset;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    /* -webkit-transform: scale(1.1); */
    height: 100%;
    width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding-top: 25px;
    border-bottom:1px solid #eee;
    text-align: center;
}

示例图片：