search

rviscomi / trunk8

jQuery Truncation Plugin -- THIS PROJECT IS NO LONGER MAINTAINED
MIT License
703 stars 95 forks source link

Giving different results in different browsers #37

Closed axhamre closed 11 years ago

axhamre commented 11 years ago

I'm trying to implement the jQuery plugin Trunk8 on this site: http://snipr.com/27tpl8z, and truncate the text after one line.

In Firefox, it's working as expected.

In Chrome (31), it gives different results, truncated and untruncated, when refreshing the page.

In Safari the truncated line doesn't fit, so it becomes two lines.

Have I missed anything in the style declaration or somewhere else, or why does it behave like this?

I have started a question on SO about this: http://stackoverflow.com/questions/18840573/trunk8-giving-different-results-in-different-browsers

rviscomi commented 11 years ago

I'm curious about the impact of the web font "myr" you're using. How is the font loaded -- deferred by some JavaScript font library or loaded synchronously in the head?

It's possible that the call to trunk8 is early enough that it operates on the text in the default font. When the web font loads and gets applied, the text is already truncated and may or may not fit on the line.

I tested this in Safari and some of the event labels wrap to two lines, but some remain on one line. This suggests that trunk8 is working correctly and the new font is applied afterwards. Invoking trunk8 again on the completed page updates the text to appear as expected.

So you should either: 1) make the web font load synchronously and block the DOM ready event, or 2) move the trunk8 call to after the web font loads asynchronously.

axhamre commented 11 years ago

Genius! Hiding the page by opacity:0; and showing it together with a trunk8-call in a $(window).on('load', function() {}); did the job. Thanks a million for helping me resolving this (and so quickly), you litterally saved me days.