Good Morning,
Today my Google chrome browser updated to 42 (42.0.2311.90), I have noticed alot of things going wrong with the site I'm working on, text will go through divs, padding being ignored.
The interesting thing is if you inspect the element and untick anything and tick it back again it starts working fine. No issues in any other browser or previous version of chrome (colleague still has 41). If you refresh the page a number of times the site appears correctly. If I delete the @font-face, the site works correctly.
It would appear that chrome seems to have either changed the way it draws/renders the external font or, it loads this last after drawing all the other elements.
Does anyone know any possible fixes or smooth way to use @font-face to make it (new version) chrome friendly?
@font-face {
font-family: 'MyFontFile';
src: url("../css/fonts/MyFontFile.eot") format("embedded-opentype"),
url("../css/fonts/MyFontFile.ttf") format("truetype"),
url("../css/fonts/MyFontFile.svg") format("svg"),
url("../css/fonts/MyFontFile.woff") format("woff");
font-style: normal;
font-weight: normal;
}
In order to fix this, I had to force the browser to redraw. Putting the following jquery in, this forces the browser to redraw.
$('body').hide().show(0);