Chrome inconsistent Rendering elements with offset

Question

I worked on a website and used media queries heavenly to make the site responsive.

But I experience very weird errors in Chrome where it is rendering elements in the wrong positions (looks like it is doing aligning multiple elements across the page to the right.

I will attach a screenshot of wrong alignment. As you can see the text in the top-bar goes beyond the lines. In the middle every element that is normally centered is offset to the right. Also in the bottom bar it is throwing text elements that are normally spaced next to eachother on top of eachother.

To see the the website online https://tunepitch.com/. The weird thing is that chrome sometimes renders it wrong but a lot of time it shows correct. It can go away by dragging the window but a more effective approach is to kill the browser and restart it.

Does anyone know why chrome is having this issue and what is causing it in my css?

What I tried :

• Check Audit in chrome developer tools
• Modify style variables in the inspector
• disable cache
• disable javascript

UPDATE

I spend some time debugging the css. Added css line by line and still can't find the root issue. What I noticed with all elements that are misaligned is that the width is not correctly calculate by webkit browsers. I hope the extra image can point it out. (esp when you hover the text should turn purple on hover. As you can see it is only purple to a certain amount of width.

UPDATE 2 To be clear with javascript turned off the problem still occurs. I tried to make a simple testcase for this problem but because the problem is so inconsistent I can't nail it down to a simple css block.

I am using chrome 31.0.1650.57 on Windows 8.1. One of my clients uses Windows 7 in combination with 31.0.1650.57 as well.

UPDATE 3 I got a video live that can show the weirdness of the problem. You can see the first time I open chrome it is correct, than I close and open it again and everything is misaligned. When I then inspect the element everything jumps to the right position (it doesn't do this always youtube link

UPDATE 4 @SetSailMedia is right is was the use of a svg font in Chrome. What is weird is that I used this font in some other websites and never seen this problem. I changed back to load the font from google's webfonts instead of my own hosted font. Which causes the font to become ugly again but it is a better solution than misalignment of elements.

Answer 1

It seems that svg fonts have a problem in chrome. As pointed out by commenter @Wesabi in this google group. I tested your link and changed font to a non-svg font and it seems working.

What caused your inconsistency within sessions is that sometimes the font is loaded before the calculation of elements and sometimes after depending in which order the requests comple@te.

The best solution would be to use Google Webfonts even when it makes the font look anti-aliased in chrome, it will default to another font-type.

Chrome also has problems rendering SVG fonts in select boxes for example. To see original question and bug report.

Original svg problem with select boxes

Google bug report