Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Incorrect initial 'element.scrollHeight' on iOS devices #20

Open
david-nicholson opened this issue Apr 27, 2015 · 2 comments
Open

Incorrect initial 'element.scrollHeight' on iOS devices #20

david-nicholson opened this issue Apr 27, 2015 · 2 comments

Comments

@david-nicholson
Copy link

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>
@skyguide
Copy link

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

@pixnlove pixnlove mentioned this issue Apr 4, 2017
Closed
@SergeyKurdyukov
Copy link

SergeyKurdyukov commented Oct 27, 2017 •
edited
Loading

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@david-nicholson @skyguide @SergeyKurdyukov