dibari
Incorrect initial 'element.scrollHeight' on iOS devices
In iOS there seems to be an issue with elements not having the correct element.scrollHeight when the buildEllipsis() is fired. The plugin seems to work perfectly on all desktop browsers.
The scenario I'm facing is that single line titles with a 2 line ellipsis, defined by max-height, are showing just '...' and not 'The title' until the buildEllipsis is fired again on the window resize and then the correct title appears.
The problem seems to be that thisElement[0].scrollHeight in the isOverflowed function seems to be too big at first and then later is reduced to the correct height.
I am currently getting around this issue by using the jQuery load function, but obviously this is not a desirable long-term fix.
The scenario simplified would be...
<!DOCTYPE html>
<html>
<head>
<style>
h3 {
font-size: 24px;
line-height: 28px;
max-height: 56px;
}
</style>
</head>
<body>
<h3 data-ng-bind="something" data-ellipsis></div> <!--Where $scope.something = 'A title'-->
</body>
</html>
We are seeing a similar issue in Firefox. The scrollHeight is 1 pixel more in Firefox than in Chrome, and when this occurs, our title is not displayed and just the ellipsis is.
We've had to -1 from the scrollHeight to get round a bug we faced, but ideally we need a better long term fix.
function isOverflowed(thisElement) {
return thisElement[0].scrollHeight -1 > thisElement[0].clientHeight;
}
Thanks
I saw a similar problem in Edge browser. I've done some investigation. In my case the base font size was 16px for BODY and for my DIVs font size was 1.7 from base. Actually, I got 16 * 1.7 = 27.2px but Edge rounds the value to 28px and isOverflowed method gave true result. I fixed the issue just explicitly set 27px for my DIVs.
