iOs truncate bug - Githubissues

KingCrows commented 7 years ago

Hi there, Lately i'm running in some issues on the Safari iOS browser. On desktop the truncate function works great. I've set the truncate options to truncate the text at 7 lines, but on my iPhone the text is truncated at about 2 / 2,5 lines. At first i thought it might be a GoogleFont load issue, but when trying it with default fonts like Arial or using @font-face to include the font i still had the same issue.

Any ideas what might cause this or is there a fix for this issue? Love the plugin btw, it's awesome!!

Thanks, Randy

jeffchan commented 7 years ago

Hi Randy, I haven't done extensive testing on iOS Safari, so it's very possible there's an issue. Is this the latest version of iOS 10?

KingCrows commented 7 years ago

Hi Jeff, Thanks for your reply.

Yes, i personally have the issue on iOS 10

KingCrows commented 7 years ago

It doesn't seem to be an Safari iOS 10 issue only, i'm also experiencing these issues in de desktop browser of Safari on my Macbook... :-(

KingCrows commented 7 years ago

I got it working for now!

Some of the things i added to fix the issue: include FontSpy.js what checks if the font is loaded. On succes execute the truncate functions. This still didn't fix it in all occasions. Sometimes the text was truncated and sometimes it wasn't. Next thing i did was adding a set timeout of 200ms before the truncate functions was called after the font was loaded. This fixed it for me in Safari desktop and iOS browsers. So it seems to be a font loading issue after all.

Here is an example of the code: fontSpy('Alegreya Sans', { glyphs: '\ue81a\ue82d\ue823', success: function() { setTimeout(function(){ truncate(); }, 200); });

function truncate(){ $('div#news div.latest-news div.latest-item div.latest-title h2').truncate({ lines: 1 });

Not the cleanest fix, but acceptable...

jeffchan commented 7 years ago

Ah nice! Glad you figured it out.

jeffchan / truncate.js

iOs truncate bug #40