过渡结束后粘糊糊的效果搞砸了

Question

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

我一直试图找出问题所在，但没有成功。

视频：https://vimeo.com/248225026

代码如下：

$('.register-option').click(function() {
  $('.register-option').removeClass('selected');
  $(this).addClass('selected');
});

body {
  background-color: rgb(158, 158, 158);
}

.register-choose {
  -webkit-filter: url(#goo);
  filter: url(#goo);
}

.register-choose .register-option {
  position: relative;
  width: 100px;
  height: 40px;
  border-radius: 120px;
  display: inline-block;
  color: #000;
  font-family: Tahoma;
  line-height: 40px;
  font-size: 12px;
  background-color: #fff;
  text-align: center;
  -webkit-transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
  background-repeat: no-repeat;
}

.register-choose .register-option.selected {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.register-choose .register-option:first-of-type.selected {
  background-color: rgb(0, 181, 255);
}

.register-choose .register-option:last-of-type.selected {
  background-color: rgb(255, 118, 217);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="register-choose">
                <span class="register-option selected">Male</span>
<span class="register-option">Female</span>
</span>

<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" result="goo" />
				<feComposite in="SourceGraphic" in2="goo" operator="atop" />
			</filter>
		</defs>
	</svg>

谢谢。

Answer 1

这是一个神奇的咒语，似乎可以解决 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>