Not loading data when zoom set to < 100%

[les2]

For some reason, the table is not loading the first page of data when the user has the zoom set to 90% (technically, any zoom < 100%).

We are using ELT without a fixed header and without a height set on the table.

I will see if i can create a repo with a simple, reproducible example later on.

Not sure where the bug is - going to attempt to debug it shortly.

[buschtoens]

Can you tell us which browser and OS or does it happen in any browser?

[offirgolan]

@les2 I'm not able to recreate this in the demo app (zoom set to 75%).

If you add a fixed header + height does it solve your issue?

[les2]

@buschtoens debugged issue with one of our users and i reproduced on chrome 53; working on a reproduction recipe.

[les2]

update: i've been trying to reproduce the problem over here but no luck yet.

but i can consistently reproduce in one of our production applications. i think i'm using a new version of ELT in the repo i linked above so i'm going to try to reproduce with the exact version we're currently using in production - 1.4.2 - and see if that's the issue.

[les2]

TL;DR -- this is a floating point bug ... in ember-in-viewport addon.

This is really hard to reproduce because you need the numbers to round just right.

Details

The bug is in one of these two locations:

• https://github.com/DockYard/ember-in-viewport/blob/master/addon/mixins/in-viewport.js#L94-L104
• https://github.com/DockYard/ember-in-viewport/blob/master/addon/utils/is-in-viewport.js#L12-L27

Example.

// values for bounding client rect of the `lt-infinity` element!
top:  318.85418701171875 left:  0 bottom:  318.85418701171875 right:  1451.1112060546875

// tolerance values:
topTolerance:  0
leftTolerance:  0
bottomTolerance:  500
rightTolerance:  0

// width and height of the window (viewport):
width:  1451 height:  820

// ALL of these have to be TRUE in order for the lt-infinity element to be *in* the viewport:
(top + topTolerance)       >= 0                   ? true
(left + leftTolerance)     >= 0                     ? true
(bottom - bottomTolerance) <= height    ? true
(right - rightTolerance)   <= width           ? FALSE     <---- this is the problem!

right boundary check in detail:

(right - rightTolerance)   <= width
1451.1112060546875 <= 1451    ===> FALSE

So we need to round (down) to integer value the bounding client rect values, I guess.

I'm going to look at a PR to the ember-in-viewport repo in a little bit and then open a PR to this repo that just bumps the version of that package.

[les2]

@offirgolan I have managed to make it reproducible: https://les2.github.io/ember-light-table-zoom-bug/#/elt-demo

1. Go to this URL
2. Set your zoom to 90% (or whatever)
3. Refresh the page -- notice the initial onScrolledToBottom doesn't fire (because of the ember-in-viewport bug described above)
4. If you resize the browser window manually, this will set the width of the window to an integer value and the onScrolledToBottom event will fire correctly.

[offirgolan]

@les2 this seems as though it was one hell of a bug hunt. Thanks for taking the time to put this all together. Im really sorry I have been of no help! Im currently traveling out of the country so I don't have too much time but it seems as though you have a pretty good handle on this issue. I look forward to a PR with a solution on the ember-in-viewport side 😄!

If you have something you wanna run by me, feel free to ping me on slack as I'm a bit more reachable there.

[offirgolan]

@les2 a new patch (1.8.1) has been released with the latest release of ember-in-viewport. Thanks again for taking the time to hunt this issue down 😸