CSS Animation Flicker After Latest Update

[JacobRouser]

After the latest update, I noticed that my header is flickering in Chrome, which seems to be a common issue with webkit.

I’ve searched around the forum and haven’t found anything in regards to this problem.

I’ve tried adding the some of the suggested code snippets from around the web, but I’ve not been able to resolve.

I’m wondering if I’m not targeting the right element or if it is another problem any help would be greatly appreciated

Solutions tried:https://coderwall.com/p/gmpjzg/prevent-flickering-on-css3-transitions-transforms-in-webkit

https://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit

[JacobRouser]

I’m not sure why this worked, but I updated the CSS to a different style of animation.

From

 .x-nav-wrap.desktop .x-nav > li > a > span{
    color: #31302B;
    font-family: 'Lato', sans-serif;
    border: 3px solid #31302B;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 2px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    box-shadow: inset 0 0 0 0 #31302B;
    -webkit-transition: all ease 0.8s;
    -moz-transition: all ease 0.8s;
    transition: all ease 0.8s;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.x-nav-wrap.desktop .x-nav > li > a > span:hover {
    box-shadow: inset 0 100px 0 0 #31302B;
    color: #FFF;
  -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
}

To

.x-nav-wrap.desktop .x-nav > li > a > span{
  display: inline-block;
  vertical-align: middle;
    border-radius: 2px;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.x-nav-wrap.desktop .x-nav > li > a > span:before{
  content: "";
  position: absolute;
    border-radius: 2px;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #3398db;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
    }
.x-nav-wrap.desktop .x-nav > li > a > span:hover, .x-nav-wrap.desktop .x-nav > li > a > span:focus, .x-nav-wrap.desktop .x-nav > li > a > span:active{
 color: white;
}

.x-nav-wrap.desktop .x-nav > li > a > span:hover:before, .x-nav-wrap.desktop .x-nav > li > a > span:focus:before, .x-nav-wrap.desktop .x-nav > li > a > span:active:before{
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

[thai]

Glad to hear everything is working now.