Chrome webfont rendering issue

[kipusoep]

Hi,

I've built a website which had this weird webfont (Robot Slab Regular) rendering issue:

It didn't occur in Firefox, it might be a webkit-only issue or Chrome-only issue. When I removed the reference to Responsive BP, the issue wouldn't occur, so I started digging inside the responsive bp css file. After some investigation I found the issue to be on line 153 (v4.0.3):

html {
  -webkit-overflow-scrolling: touch;
  color: #222222;
  font-size: 100%;
  line-height: 1.4;
  box-sizing: border-box;
}

By adding this to my own stylesheet, the issue is gong:

html {
    line-height: normal;
}

[JimBobSquarePants]

Interesting... There's nothing wrong with the initial declaration, I wonder whether this is a known blink issue....

Time for some research.

[JimBobSquarePants]

Actually, I've seen this before and not just with Responsive. I think Chrome has introduced a new bug. Line height accepts unit-less values and it's actually recommended practice. See this old article here.

http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/

and another on CSS Tricks.

https://css-tricks.com/almanac/properties/l/line-height/

I think I'm gonna mark it as wontfix for now. I've set a good default and the issue is recent, only present with certain fonts, easily overridable, and will probably go away again soon what with the rapid release cycle of Chrome.

[kipusoep]

Closing the issue is the right thing to do I guess, it's definitely not a ResponsiveBP specific issue. Hopefully people will find this issue, including the easy override fix, when bumping into this issue :-)