computation is off on firefox with roboto font weight 900

Question

computation is off on firefox with roboto font weight 900

bitboxer opened this issue 5 years ago · comments

I just tried to use your nice library in a small side project, but sadly it fails to clamp correctly on Firefox 67.0.2 (64-bit) on my Linux machine. When using the Roboto Font with a font-weight of 900, it has too many characters. It should clamp after two lines, but the result is this:

With the font-weight of 400 it works.

Do you have an idea what is going on there? Would love to help out and fix it.

Jacky Rao · Answer 1 · Mon Jun 17 2019 12:43:22 GMT+0800 (China Standard Time)

@bitboxer Thanks for using my library. I can't reproduce this problem with my Firefox browser, could you give me a real example in codepen?

Bodo Tasche · Answer 2 · Mon Jun 17 2019 15:16:58 GMT+0800 (China Standard Time)

Yes, of course. Will try to reproduce it on a codepen. Hope I can do it before thursday.

Bodo Tasche · Answer 3 · Thu Jun 20 2019 15:25:30 GMT+0800 (China Standard Time)

Sorry, didn't manage to provide you this. Sadly I am going to the euruko conference over the weekend. Will come back to you next week with this.

Jacky Rao · Answer 4 · Fri Jun 21 2019 18:02:08 GMT+0800 (China Standard Time)

That's fine, have a good weekend.

Bodo Tasche · Answer 5 · Fri Jun 28 2019 00:59:09 GMT+0800 (China Standard Time)

It took me some time to figure out what went on, but now I found it. The library adds a span while trying out what text will fit into the element. And the css i used only added a specific font weight to the element, not the child elements. So the library calculated with the wrong font weight and then replaced the span with the text and then the css displayed the text in the correct weight again.

So one question: is the adding of the span really needed? Or can that part be rewritten to not do that? Otherwise other people might run into the same problem.

Jacky Rao · Answer 6 · Mon Jul 01 2019 19:20:40 GMT+0800 (China Standard Time)

Thanks for pointing out the problem. I'll try to find another way instead of adding a span, and that may be a breaking change, so it will be solved in version 2.0.

Bodo Tasche · Answer 7 · Mon Jul 01 2019 19:29:56 GMT+0800 (China Standard Time)

Thank you! If you need anything, just ping. I would love to help out.

Jacky Rao · Answer 8 · Wed Jul 03 2019 21:47:59 GMT+0800 (China Standard Time)

Multi-clamp v2.0 beta published, it will no longer add a span. Welcome feedback.

Bodo Tasche · Answer 9 · Tue Jul 09 2019 02:22:40 GMT+0800 (China Standard Time)

Hm, just tried with the 2.0 beta and it looks like it doesn't clamp at all in Firefox, but in Chrome it continues to work.

Jacky Rao · Answer 10 · Tue Jul 09 2019 12:37:11 GMT+0800 (China Standard Time)

Here's an online cross-platform browser compatibility test website:
http://browsershots.org/https://jackyr.github.io/multi-clamp/example/index.html
I just test the demo page(v2.0.0-beta.0), and it works well in Firefox of any version and any platform. So I have no idea about what happened in your environment.

Bodo Tasche · Answer 11 · Tue Jul 09 2019 15:34:40 GMT+0800 (China Standard Time)

I will debug in more detail soonish.

Bodo Tasche · Answer 12 · Wed Jul 10 2019 19:05:49 GMT+0800 (China Standard Time)

Ah related: firefox 68 now supports --webkit-line-clamp

Jacky Rao · Answer 13 · Thu Jul 11 2019 14:34:05 GMT+0800 (China Standard Time)

I see that. If there are no more problems with multi-clamp, the v2.0 official version will be released.