jQuery/CSS transitions are having a strange effect on font-smoothing in Chrome -

this 1 of little bugs has taken afternoon pinpoint, , although i've found seems causing it, can't work out why it's happening.

i can't recreate in jsfiddle annoying.

i'm using several jquery , css transitions on wordpress website, , reason when transition between opacity:0 , opacity:1 using toggleclass, font-smoothing seems temporarily stop working , starts working again when transition has finished.

on website, have @ page – http://www.lucieaverillphotography.co.uk/contact

if drag browser width below 980px , press menu button @ top left, push menu open hyperlinks in bold font.

watch opacity changes 0 1 – text heavier supposed be, , seems thin out animation finishes. thing can think webkit-font-smoothing value being interfered somehow.

initially had opacity values set on nav menu rather hyperlinks, worse. text didn't correct when animation had finished.. became stuck until resized window width little.

again, chrome that's doing this. have idea might going on? can't make happen in jsfiddle, i'll paste relevant code below.

css

body {     -webkit-font-smoothing:antialiased;     -moz-osx-font-smoothing:grayscale;  }  nav.main-menu-mobile ul li {     transition: 0s ease 0.6s;     opacity:0;  }  body.open-left nav.main-menu-mobile ul li {     transition: opacity 1.6s ease 0.3s;     opacity:1; }  

jquery

jquery(document).ready(function($) {          $('.menu-button').click(function() {         $('body').toggleclass('open-left');      }); });