防止滚动到：聚焦按钮

Question

以下问题不适用于Firefox。但它确实适用于Chromium，（某些？）版本的IE，Vivaldi等。

在为朋友的任务组织工作一个简单的website时，我遇到了主页幻灯片显示的问题。幻灯片的基本布局和样式如下：

HTML

<div id="JSslideshow">
    [... images ...]
    <button id="ssprev" type="button" data-para="-1"></button>
    <button id="ssnext" type="button" data-para="1"></button>
</div>

CSS

/*Setup javascript slideshow*/
#JSslideshow {
    background-color: #333;
    border: 1px solid black;
    box-shadow: 0px 0px 20px #005;
    margin: 0px auto;
    overflow: hidden;
    position: relative;
    }

    /*setup the slideshow button general rules*/
    button {
        background-image: url('../data/home/arrows.jpg');
        background-repeat: no-repeat;
        border: 2px solid white;
        cursor: pointer;
        display: inline-block;
        height: 64px;
        margin-top: -32px;
        opacity: .75;
        position: absolute;
        top: 50%;
        width: 64px;
        }

    #ssnext {
        background-position: 0px -64px;
        border-radius: 25% 0px 0px 25%;
        margin-right: -32px;
        right: -2px;
        }

    #ssprev {
        background-position: 0px 0px;
        border-radius: 0px 25% 25% 0px;
        left: -2px;
        margin-left: -32px;
        }

如果您选中幻灯片中的最后一个按钮，则所有内容都向左滑动，以便最后一个按钮完全可见。 （请记住：这不适用于Firefox。）

示例：

正确！的

变成

错！

最后决定询问我的stackoverflow用户的意见，我决定得到一个最小的，可验证的JSFiddle示例。

Here it is.（请注意，只要您选中最后一个按钮，文字就会向左滑动。）

This one,但是，工作正常。

2？

之间的区别

#ssnext {
        right: -2px; /*This is 0px in the example that works correctly*/
        }

有没有人任何想法为什么right: -2px让#JSSlideshow div滚动到焦点#next按钮？

注1：

正如您在下面的评论中所看到的，@ sherrifderek认为right: -2px;不是问题的根源。它可能不是，但确实修复问题。

有没有人有更多想法？