Jquery 过渡结束后，胶粘效果混乱

我正在尝试创建一种具有粘性效果的单选按钮。 过渡发生时效果看起来很好，但一旦过渡结束，效果就会混乱（颜色混合不好，边缘会发光）

我一直在想问题出在哪里，但没有成功

视频：

代码如下：

$（'.register option'）。单击（函数（）{
$（'.register option'）.removeClass（'selected'）；
$（this.addClass（'selected'）；
});
正文{
背景色：rgb（158158158）；
}
.注册选择{
-webkit过滤器：url（#goo）；
过滤器：url（#goo）；
}
.注册选择.注册选项{
位置：相对位置；
宽度：100px；
高度：40px；
边界半径：120px；
显示：内联块；
颜色：#000；
字体系列：Tahoma；
线高：40px；
字体大小：12px；
背景色：#fff；
文本对齐：居中；
-webkit过渡：所有600ms立方贝塞尔（0.165,0.84,0.44,1）；
过渡：所有600ms立方贝塞尔（0.165,0.84,0.44,1）；
背景重复：无重复；
}
.register-choose.register-option.selected{
-webkit转换：比例（1.1）；
转换：比例（1.1）；
}
.注册选择。注册选项：类型的第一个。已选择{
背景色：rgb（0181255）；
}
.register-choose.register-option:last-of-type.selected{
背景色：rgb（255、118、217）；
}

男性
女性
这是一个神奇的咒语，似乎可以解决Firefox的视觉缺陷。我不知道它为什么会工作，但它似乎踢出了Firefox过滤代码的正确部分

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <filter id="goo" >
                <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
                <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 16 -6"/>

    <feComponentTransfer result="goo">
      <feFuncA type="table" tableValues="0 .2 .4 .6 1 1"/>
     </feComponentTransfer>
            <<feComposite in="SourceGraphic" in2="goo" operator="atop" />
            </filter>
        </defs>
    </svg>


您在哪个浏览器中看到问题？对我来说，Chrome看起来不像视频。将stdDeviation从10减少到5左右，可以防止Chrome中Firefox.dom_中的“发光”上下边框。同样在Chrome手机中。减少stdDeviation会使效果变弱，难道没有其他解决方案吗？在Chrome甚至Firefox中看起来都一样。这对我在Windows上最新的Chrome/FF上很有效。你能添加你的浏览器版本和操作系统吗？Chrome 63，Windows 10适合我。您可能启用了一些Chrome标志，或者这些标志可能是由于GPU/驱动程序有缺陷所致。在另一台电脑上试试。