Firefox中的Sticky Bar Glitch

Question

所以我有一个粘性条，当它变得固定时，它有一个前后元素的动画。

这在Chrome上工作得很好，但在firefox上稍微有点毛病。

网站现场链接是： http://pixelfriendlytech.co.za/

简单演示在这里： https://jsfiddle.net/zr8gc1f7/4/

这是css：

#pf-bar{padding: 0px;
z-index: 1000;
top:0;
left: 0;
right: 0;
position: relative;
max-width: 2560px;}

#pf-bar:before {
content: "";
position: absolute;
top: 0;
right: calc(50% + 570px);
bottom: 0;
width: 0px;
height: 60px;
background-color: #fff;
border-bottom: 3px solid #2484C6;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
z-index: -1;}

#pf-bar:after {
content: "";
position: absolute;''
top: 0;
left: calc(50% + 570px);
bottom: 0;
width: 0px;
height: 60px;
background-color: #fff;
border-bottom: 3px solid #F72244;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
z-index: -1;}


.sticky #pf-bar:before {
width: calc(50% - 570px);}

.sticky #pf-bar:after {
width: calc(50% - 570px);}

.sticky #pf-bar{
position: fixed;
width: 100%;
box-shadow: 0px 4px 10px rgba(0,0,0,.2);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;'}