Running Very Slowly about ember-in-viewport HOT 9 CLOSED

"ember-cli-babel": "^7.7.3" -> "ember-cli-babel": "^7.18.0"

"ember-cli-template-lint": "^1.0.0-beta.1", -> "ember-cli-template-lint": "^1.0.0"

"ember-export-application-global": "^2.0.0" - > "ember-export-application-global": "^2.0.1"

I down graded the package to my last version "ember-in-viewport": "^3.6.1" and everything is still running very slowly.

Above are the other packages that updated.

Something is causing ember-in-viewport to run very slowly, a page that loaded instantly in the previous build now hangs for a few seconds and animations on the page are choppy.

This makes me think ember-in-viewport is falling back to timers in this build, on iOS, when before it was using the recommended method to detect when in view.

from ember-in-viewport.

We have the latest installed in a variety of apps that take advantage of this addon VERY heavily and have not had issues. That is not to say you don't have issues. My first inclination is it is application specific. Do you have an idea which browsers it is specifically running slow on? Does it run slowly on Chrome or Firefox?

from ember-in-viewport.

It is being used in Cordova / Ember on iOS 13.

The only difference in todays build and the previous build is the changes to the above package versions.

I have access to previous builds in Testflight and reinstalling one of them makes everything work fine again.

Do you think ember-cli-babel could be causing issues?

from ember-in-viewport.

@snewcomer It seems when going from 3.6.1 -> 3.7.1 the following was updated in the dependencies

intersection-observer-admin 0.2.9 -> 0.2.10

This is what is breaking my app, version 0.2.10 just doesn't work in iOS in a webview. Forcing 0.2.9 and it works again.

from ember-in-viewport.

@MatthewPringle Interesting. Doesn't look like we touched anything between 0.2.9 and 0.2.10 that is production code related. We did change in 1.6.2 that may be related. What does your app look like on 3.6.2?

https://github.com/snewcomer/intersection-observer-admin/commits/master

from ember-in-viewport.

In 3.6.1 I have a scrolling component which fills most of the screen, iOS style header + footer. Im drawing a calendar and so output components for years, quarters and months and when each of those is in view I set the flag "show" and the template draws the contents of the component, otherwise it just draws the surrounding container which has height.

Im not doing anything crazy in terms of layout, and in 3.6.1 it worked amazingly well, near 0 lag on drawing the initial screen, now it takes 5 seconds to do the same.

Im still debugging but it seems didEnterViewport fires for all the components and some are thens of thousands of pixels off screen and didExitViewport never fires when I'm scrolling.

<section class="component-calendar-year">
{{#if show}}

    {{#each quarter as |month|}}
        
        {{components/calendar/component-calendar-month calendar=this.calendar month=month}}
    
    {{/each}}

{{/if}}
</section>

import EmberComponent  from '@ember/component';
import InViewportMixin from 'ember-in-viewport';

export default EmberComponent.extend( InViewportMixin , {

    tagName: 'section',
    classNames: [ 'component-calendar-year' ],

    show: false,

    init() {
        this._super(...arguments);
        this.set( 'viewportSpy' , true );
    },
    
    didEnterViewport() {
       this.set( 'show' , true );
    },

    didExitViewport() {
        this.set( 'show' , false );
    }
    
});

from ember-in-viewport.

Tested on iPhone X 13.3 Safari Browser. OSX 10.14 Safari Browser. OS Chrome 80

"intersection-observer-admin": "0.2.10" in my package.json and it works

"intersection-observer-admin": "0.2.11" in my package.json and it doesn't work

it seems intersection-observer-admin 0.2.11 is the issue?

from ember-in-viewport.

It would seem to be this line which causes the issue snewcomer/intersection-observer-admin@c19b7f5

From:
if (isIntersecting || intersectionRatio > threshold) {

To:
if (isIntersecting || intersectionRatio >= threshold) {

from ember-in-viewport.

Ok perfect. I'll revert! That is great to hear!

from ember-in-viewport.