Different line height between Firefox and Chrome #18

Open
xfalcox opened this Issue Jun 22, 2015 · 9 comments

Projects

None yet

4 participants

@xfalcox
xfalcox commented Jun 22, 2015

Guys, we're trying to use this plugin and found huge line height difference between browsers.

Any tips?

fitter

@kennethormandy
Contributor

Good catch. The demo page uses Avenir Next, which is only a system font on relatively reecnty versions of OS X. On other browsers it’s falling back to whatever maps to sans-serif, which looks like it’s to different fonts between Firefox and Chrome for you, hence the different line heights.

If the typefaces were the same, or if you give things a try locally with a different font, I don’t think this would be an issue.

@kennethormandy kennethormandy added a commit to kennethormandy/fitter-happier-text that referenced this issue Jun 22, 2015
@kennethormandy kennethormandy Adds font stack to improve #18 e393de8
@jxnblk
Owner
jxnblk commented Jun 22, 2015

That might be what's happening. It looks like Firefox also handles letter spacing differently, which would cause the SVG to appear larger and affect the line height.

@xfalcox what version of Firefox is this screenshot? And can you share the styling that it's inheriting?

@xfalcox
xfalcox commented Jun 23, 2015

I'll try to get some screenshots at work tomorrow, because we found this using a webfont, probably Lato, and had to pull back some code because since line height was much bigger on firefox (latest or FF16 our target) text was getting cropped since the parent div has a max height.

@xfalcox
xfalcox commented Jun 23, 2015

@jxnblk It's just the plugin page on latest chrome and firefox. What's worst for us is the space between lines (look after AT EASE line).

@xfalcox
xfalcox commented Jun 23, 2015

Found this:

No letter spacing on Firefox on SVG (https://bugzilla.mozilla.org/show_bug.cgi?id=371787)

@jchck
jchck commented Jan 5, 2016

@xfalcox have you found a work around for this? I'm experiecing it too.

@xfalcox
xfalcox commented Jan 5, 2016

We gave up =(

Currently a coworker wrote a similar implementation using canvas, but it's kinda CPU heavy.

@jchck
jchck commented Jan 5, 2016

That's not promising.

@jchck
jchck commented Jan 6, 2016

This seems to be related to a discrepancy in how the svg viewBox attribute is being calculated.

ie: a heading viewed on webkit has an svg viewBox="0 0 92 12" while the same heading viewed on moz has an svg viewBox="0 0 91.6666 26".

@rileyjshaw rileyjshaw added a commit to rileyjshaw/fitter-happier-text that referenced this issue Mar 9, 2016
@kennethormandy @rileyjshaw kennethormandy + rileyjshaw Adds font stack to improve #18 f343c47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment