Firefox неправильно отображает вставку box-shadow с радиусом границы

У меня есть несколько кнопок в верхней части боковой панели. Первая и последняя кнопки имеют закругленный угол, соответствующий краям боковой панели. Когда .active, кнопки должны иметь вставку box-shadow. В Chrome это работает правильно. В Firefox, однако, box-shadow не следует за радиусом границы и вместо этого имеет острый угол. Я делаю что-то не так, или это ошибка в том, как Firefox отображает тень? Кстати, это Firefox 41.0.1 для Ubuntu.

Я не могу опубликовать скриншот (политика компании), но я добавил скрипку (ссылка в конце поста), где вы сможете увидеть проблему.

Я искал пару дней и не нашел других вопросов, описывающих такое же поведение.

Вот HTML:

<div class="sidebar">
<div class="sidebar-nav"> 
    <a class="menu-item active" href="#" onclick='toggleNav(this)'>
      My Page
    </a>
    <a class="menu-item" href="#" onclick='toggleNav(this)'>
      Your Page
    </a>
    <a class="menu-item" href="#" onclick='toggleNav(this)'>
      Our Page
    </a>
</div>
<div class="sidebar-main">
    <div class="sidebar-row">
        <div class="sidebar-h1">User Info</div>Phasellus blandit nulla ante, non tempus sem imperdiet sagittis. Vivamus condimentum et est eu iaculis. Nam semper nunc quis rhoncus viverra. Nam lorem nulla, feugiat at sodales sit amet, tempor quis nisi. Sed dictum in tortor et dapibus. Aliquam erat volutpat. Vivamus venenatis faucibus justo vitae rutrum. Sed in viverra ipsum. Duis et metus at metus euismod fermentum sed eu dolor.</div>
    <div class="sidebar-row">
        <div class="sidebar-h1">User Settings</div>
        <label>
            <input type="checkbox" />Settings</label>
        <br>
        <select>
            <option>Words</option>
            <option>Things</option>
            <option>Stuff</option>
        </select>
    </div>
</div>
</div>

И CSS:

.sidebar {
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    color: #888;
    background: #eee;
    width: 250px;
    height: 100%;
}
.sidebar-nav {
    padding: 0px;
    display: table;
    width: 100%;
    border-bottom: 1px solid #ccc;
    border-collapse: collapse;
}
.sidebar-nav > .menu-item {
    color: #888;
    padding: 10px;
    vertical-align: top;
    display: table-cell;
    cursor: pointer;
    text-decoration: none;
}
.sidebar-nav > .menu-item:first-child {
    border-radius: 8px 0 0 0;
}
.sidebar-nav > .menu-item:last-child {
    border-radius: 0 8px 0 0;
}
.sidebar-nav .menu-item + .menu-item {
    border-left: 1px solid #ccc;
}
.sidebar-nav > .menu-item:not(.active):hover {
    background-color: #ddd;
}
.sidebar-nav > .active {
    color: white;
    box-shadow: inset 0px -2px 4px 2px #888;
    background-color: #aaa;
}


.sidebar-main {
    padding: 10px;
}

.sidebar-h1 {
    font-size: 1.2em;
    font-weight: bold;
    margin: 5px;
}

.sidebar-row {
    padding: 15px;
    position: relative;
}

.sidebar-row:after {
    content:'';
    width: 50%;
    height: 1px;
    background: #ddd;
    position: absolute;
    left: 25%;
    bottom: -1px;
}

И JSFiddle (обратите внимание, что скрипт также включает в себя небольшой jQuery, чтобы кнопки можно было нажимать).