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.

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

RC4 ion-img doesn't correctly work with virtualScroll #9660

Open
pavimus opened this Issue Dec 16, 2016 · 88 comments

Comments

Projects
None yet
@pavimus

pavimus commented Dec 16, 2016

Ionic version: (check one with "x")
[ ] 1.x
[x ] 2.x

I'm submitting a ... (check one with "x")
[x ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
When you use virtualScroll and ion-img, after scrolling down (when buffer ends) ion-img stops loading images

_034

Please look at code inspector:

2016-12-16 10-23-17

url http://base247.lin2/thumbs/c6/files_56_222bf7a3335ce7c20553f0f374eb0266b871af41.jpg_mobileListImage_1412346660_3.jpg

is correct (for my local machine) and image is available.

Expected behavior:
ion-img must load images

Steps to reproduce:

Related code:

<ion-content>
    <ion-refresher (ionRefresh)="dataService.refresh($event)">
    <ion-refresher-content
        pullingText="Потяните для обновления"
        refreshingText="Загрузка">
    </ion-refresher-content>
</ion-refresher>
    <ion-list [hidden]="(works|filterWorks:filter.price.mode:filter.price.from:filter.price.to:filter.price.currency_id:filter.location.mode:filter.added.mode:sort.orderBy:commonData).length==0" [virtualScroll]="works|filterWorks:filter.price.mode:filter.price.from:filter.price.to:filter.price.currency_id:filter.location.mode:filter.added.mode:sort.orderBy:commonData" approxItemHeight="80px" >
    <ion-item-sliding *virtualItem="let work">
        <button ion-item (click)="goWork(work)" [ngClass]="{'work-list-item-selected':selectedWorks.works[work.id]}">
            <ion-thumbnail item-left>
                                    <ion-img [src]="work.image|defaultImage"></ion-img>
                            </ion-thumbnail>
                        <h3>{{commonData.authors[work.author_id]?.title}}</h3>
            <h5>{{work.title}}</h5>
            <p class="work-list-price">{{work.price | price : work.price_currency_id : commonData.currencyExchangeRate : true}}</p>
            <p>{{work.year ? work.year+',':''}} {{work.techniques | techniques : commonData.techniques : commonData.mainLanguageId}}</p>
        </button>
        <ion-item-options side="left">
            <button ion-button icon-only color="primary" (click)="selectedWorks.toggle(work)">
                <ion-icon name="{{selectedWorks.works[work.id] ? 'checkmark-circle':'radio-button-off'}}"></ion-icon>
            </button>
        </ion-item-options>
        <ion-item-options side="right">
            <button ion-button icon-left color="primary" (click)="sendWorkByEmail(work)">
                <ion-icon name="mail"></ion-icon>
                Email
            </button>
        </ion-item-options>
    </ion-item-sliding>
</ion-list>
</ion-content>

Other information:

Bug appeared in RC4, in RC3 all was OK.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.3.1 
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.13
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.45
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v4.2.6
Xcode version: Not installed
@agrt56

This comment has been minimized.

agrt56 commented Dec 16, 2016

I have the same issue with my app since updating to rc4.

@naveedahmed1

This comment has been minimized.

naveedahmed1 commented Dec 17, 2016

I am facing the similar issue with RC 4, in RC 3 it was working fine.

@tomaszczechowski

This comment has been minimized.

tomaszczechowski commented Dec 19, 2016

Same issue on my end

@sajTempler

This comment has been minimized.

sajTempler commented Dec 19, 2016

try using just "img" instead of "ion-img". Worked for me.

@filipsuk

This comment has been minimized.

filipsuk commented Dec 19, 2016

"ion-img" stopped working for me in rc4, too (even without virtual scroll). Could replacing with "img" cause some performance issues in longer lists?

@naveedahmed1

This comment has been minimized.

naveedahmed1 commented Dec 19, 2016

@sajTempler yes it works but we loose the performance benefits such lazy loading that comes with ion-img

@sajTempler

This comment has been minimized.

sajTempler commented Dec 19, 2016

You can still use ng2 lazy loader. There are two or more. I'm using this one https://github.com/tjoskar/ng2-lazyload-image

@flolovebit

This comment has been minimized.

flolovebit commented Dec 20, 2016

Ciao folks,
ion-img work fine only if the tag is in the visible content., every List, segment an so on ....doesn't work .
My temporary fix:

  1. open node_modules/ ionic-angular/component/img/img.js
  2. change the function ngAferContentInit with:

Img.prototype.ngAfterContentInit = function () {
var _this = this;
this._img = this._elementRef.nativeElement.firstChild;

    if(!this._img.hasAttribute("src")){


        this._img.src=this._elementRef.nativeElement.getAttribute("src");

    }

    this._unreg = this._platform.addEventListener(this._img, 'load', function () {
        _this._hasLoaded = true;
        _this.update();
    }, { passive: true });
};

I hope in quickly fix by Ionic team:)

@jgw96

This comment has been minimized.

Contributor

jgw96 commented Dec 21, 2016

Hello all! Thanks for using Ionic! Could someone post a repo that i can use to reproduce this issue?

@jgw96 jgw96 added the v2 label Dec 21, 2016

@naveedahmed1

This comment has been minimized.

naveedahmed1 commented Dec 25, 2016

@jgw96 I emailed you a sample

@jeromeXoo

This comment has been minimized.

jeromeXoo commented Jan 5, 2017

Do you still have the problem? The "ion-img" does not work as expected on my app, but I can not find an explanation for the moment

@pantonis

This comment has been minimized.

pantonis commented Jan 6, 2017

Same here. Was this fixed?

@jeromeXoo

This comment has been minimized.

jeromeXoo commented Jan 8, 2017

@naveedahmed1 Could you post your sample here? I'm not sure we're talking about the same problem

@fastf0rward

This comment has been minimized.

fastf0rward commented Jan 12, 2017

We also ran into this issue with our non-virtualScroll grid. We reproduced the issue in a plunker. Seems to work fine in a finite (non-virtualScroll) list. Whenever we add ion-infinite-scroll to the list the ion-images show issues with loading and unloading.

So 'normal' lists seem to work just fine. Lists with virtualScroll or infiniteScroll seem to have issues.

@WholeEggz

This comment has been minimized.

WholeEggz commented Jan 22, 2017

RC5 - same issue

@fastf0rward

This comment has been minimized.

fastf0rward commented Jan 26, 2017

Well apparently ion-img should only be used in conjunction with virtualScroll:
a5bbbd5

@jeromeXoo

This comment has been minimized.

jeromeXoo commented Jan 26, 2017

I have exactly the same behavior as @pavimus

After the virtual scroll buffer, image does not appear, css class is "img-unloaded" (see screenshot below)

ionimg

with ionic 2 final. Please, could you communicate on this problem?

@JustasKuizinas

This comment has been minimized.

JustasKuizinas commented Feb 1, 2017

I have this bug also in latest ionic

@fastf0rward

This comment has been minimized.

fastf0rward commented Feb 1, 2017

As we really needed this to work in our scrollable grid of images (ion-grid, without virtual scroll), we have temporarily replaced the <project_root>/node_modules/ionic-angular/components/img/img.js file in our project with this gist.

After some digging around it appears that the top and bottom of an ion-img are not relative to the absolute top of the container it is in, causing the wrong images to be loaded/unloaded. See lines 231 and 242 of the gist for the workaround.

We also tried extending ion-img, but without much success. And building a (temporary) custom version of the Ionic dist files and using that as a local dependency also appears to be more complicated than we thought. So while the Ionic team works on this, we will be using this workaround.

@JustasKuizinas

This comment has been minimized.

JustasKuizinas commented Feb 1, 2017

@sajTempler Is it possible to load images only when scroll stopped with that plugin?

@ventr1x

This comment has been minimized.

ventr1x commented Feb 2, 2017

This bug and some more (images not responsive and only 5x5 on chrome/android, images not loading on first start before any scrolling..) broke a production app which heavily relies on showing articles with lazy loaded images.
Nice that we get no documentation whatsoever on such changes. Not that this is anything news.

@JustasKuizinas

This comment has been minimized.

JustasKuizinas commented Feb 2, 2017

@ventr1x I also wonder what devs are doing because this critical bug is still open from december 16

@ventr1x

This comment has been minimized.

ventr1x commented Feb 2, 2017

It's just plain broken (it never really worked, in beta it wasn't even mentioned in any doc).

I switched to ng2-lazyload-image and got it working with rc6 like that (so some might not go through the same non documented things..):

Component

import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';

@Component({
  templateUrl: 'image-modal.html'
})
export class ImageModal {
  @ViewChild(Content) content: Content;
  
  constructor() {
  }

}

View
<img [src]="img" [lazyLoad]="img" [scrollObservable]="content.ionScroll" />

@JustasKuizinas

This comment has been minimized.

JustasKuizinas commented Feb 2, 2017

@ventr1x Is it possible to load images only when user stopped scrolling with this plugin?

@JustasKuizinas

This comment has been minimized.

JustasKuizinas commented Feb 2, 2017

@jgw96 any status update?

@rodrigoreal

This comment has been minimized.

rodrigoreal commented Mar 4, 2017

Same problem here..
If i put the ion-img inside a segment it won't load.
http://plnkr.co/edit/Zb2EQQVCFgdyZ1CRfPsW?p=preview

@decpio

This comment has been minimized.

decpio commented Aug 16, 2017

<ion-content padding> <ion-grid [virtualScroll]="__items" [bufferRatio]="2" approxItemHeight="80px" approxItemWidth="100%" [virtualTrackBy]="ItemComparer"> <div *virtualItem="let item"> <ion-row align-items-center justify-content-center> <ion-col col-auto> <ion-item> <ion-thumbnail item-start> <ion-img [src]="'my-personalized-url?item='+item?.item"></ion-img> </ion-thumbnail> </ion-item> </ion-col> </ion-row> </ion-grid>

@junerockwell

This comment has been minimized.

junerockwell commented Aug 28, 2017

@DavidWiesner Thank you! I'm using Ionic-Angular 3.6.0 (the latest at the time of this writing), and it works as expected.

The 2nd one works very well too. But I didn't want to use it because of width and height issues. I also encountered some issues where the bottom items are overlapped by the items above them if they haven't had their image loaded. But when I do scroll down, the overlapping issues are gone. The previous items that have disappeared from the viewport started to overlap. And once those items are in the viewport and the images loaded again, the overlapping issue are gone for those batches. Just FYI.

@lz006

This comment has been minimized.

lz006 commented Sep 3, 2017

@decpio your solution works perfect for me. Images remain as "unloaded" as long as scroll don't reach them but are loaded and appear when it should be. Thank you very much!!!

Just one thing noticed, if screen/window/frame size changes after the page has been loaded, lacy load still works only for those number of items that are located within the init range. But this could be caused by the origin behavior already.

@fdambrosio

This comment has been minimized.

fdambrosio commented Oct 12, 2017

thanks @DavidWiesner & @decpio the second workaround fix the problem on Ionic 3.7.1

@HugoHeneault

This comment has been minimized.

HugoHeneault commented Oct 29, 2017

So the workaround fixes the issue for Ionic 3.8 too. Why not using it @manucorporat @adamdbradley
This is still something really bad for any VS use...
@masimplo Would you check it? After your awesome work for #12917 you definitively have skills to dive in VS... 🙉

@fdambrosio

This comment has been minimized.

fdambrosio commented Oct 30, 2017

this workaround is not working on iOS9. On iOS10 & iOS11 it's ok.

@nicolus

This comment has been minimized.

nicolus commented Oct 31, 2017

@HugoHeneault, @manucorporat, @adamdbradley : I fully agree that this workaround should be merged in Ionic (I'd do a pull request but as I'm not the author of the workaround I don't feel confortable making it myself), maybe it's not perfect, but it's still infinitely better than without the patch.

I think the issue is that the Ionic team don't realize that virtualscroll is not working. There's an entry that says "virtual-scroll: flickering issue fixes" in the 3.8 changelog, why would you go and fix some flickering issues for a feature that you know doesn't work at all ?

@fdambrosio

This comment has been minimized.

fdambrosio commented Oct 31, 2017

I agree @nicolus the Ionic team don't realize that virtualscroll/ion-img is not working and that virtualscroll is not working with ion-refresh. @HugoHeneault @manucorporat @adamdbradley

@masimplo

This comment has been minimized.

Contributor

masimplo commented Oct 31, 2017

@HugoHeneault I haven't really worked with ion-img at all. I probably should have, but haven't. I can take a look but I don't have a reference on what is broken.

@nicolus the entry in the changelog is from a PR I submitted myself that fixes a regression issue in virtual scroll. I understand your frustration, but that PR fixed a particular issue with VS that made it unusable when the underlying data set was getting updated often, it was not a complete rewrite of the component that solved all issues.

I too agree that VS needs a lot more attention but it has two main issues that probably make its maintenance unviable:

  1. Virtual scroll is a hard problem to solve in the first place. Very few frameworks/libraries have solved it successfully and with certain restrictions. Ionic VS tries to solve everything, variable item size, multi column, headers/footers per item, images, resizing etc. The existing implementation has gone through various refactoring cycles fixing bugs here and there many which are unrelated with the component it self (look at point 2 for more info)
  2. Ionic virtual scroll interacts with many ionic components. Ion-img for images, infinite scroll for loading more data, content for scrolling etc. It is also supposed to render both ionic elements ion-item, ion-card etc as well as custom angular elements.

This complexity is too much for a PR to handle and it requires a complete redesign about what virtual scroll does (which means it has to align with ionic team's goals), how it does it and what interactions with other components it should have.

Moving to ionic v4 I think many of these will change (for one it will probably be able to render only other web components and not angular components inside it) like iron-list of polymer does today so not sure if putting in the effort in fixing the current implementation has any real value for people that will continue using ionic framework after its v4 release in their projects. I too am looking for options out of this rabbit hole as without virtual scroll we cannot compete with native applications in rendering a realistic amount of data.

@nicolus

This comment has been minimized.

nicolus commented Oct 31, 2017

@masimplo : you're right, I forgot that virtual scroll is used for a lot more than just ion-img (because that's what I personally use it for).
I didn't mean to criticize this particular bugfix, I just wish we had more feedback from the team regarding this issue.

@RafaelKr

This comment has been minimized.

RafaelKr commented Nov 29, 2017

I hope for a quick fix on this one. Are there any news? Is this investigated by the team?

@fdambrosio

This comment has been minimized.

fdambrosio commented Nov 30, 2017

I hope in a fix too

@HugoHeneault

This comment has been minimized.

HugoHeneault commented Nov 30, 2017

@RafaelKr @fdambrosio I think it's better not to hope for any fixes on components before v4 is released. Unfortunately for us working with ionic3, we have to deal with buggy components or to fix them by ourselves. Feel free to fix & create PR ;)

@mat90c

This comment has been minimized.

mat90c commented Dec 13, 2017

+1

@chandanch

This comment has been minimized.

chandanch commented Dec 13, 2017

try using this way

<ion-img [src]="image.url" [alt]="image.alt">
@miqmago

This comment has been minimized.

miqmago commented Mar 10, 2018

still waiting for a fix...

@RafaelKr

This comment has been minimized.

RafaelKr commented Mar 10, 2018

You have to wait for ionic v4.

@miqmago: Please read here for further information:
https://blog.ionicframework.com/whats-the-issue-with-issues/

@miqmago

This comment has been minimized.

miqmago commented Mar 10, 2018

@husainsr

This comment has been minimized.

husainsr commented Jun 21, 2018

I had same issue of showing image in inside [virtualScroll] how do i fix them.

@mopi1402

This comment has been minimized.

mopi1402 commented Jul 1, 2018

You have to wait for ionic v4.

It would be stupid to believe that it will be fixed in Ionic 4.
We will have new bugs, but the team will focus on Ionic 5, then 6, leaving a lot of bugs for each new version.
On the side of React, there is a risk of breaking changes in each version, but at least we know what to expect.
Very disappointed by Ionic... It's unworthy to let bugs drag for so long and let users fix them.

@HugoHeneault

This comment has been minimized.

HugoHeneault commented Jul 2, 2018

@mopi1402 I know that how issues have been handled by ionic team in the past isn't really good. But if you want to learn how they will handle versioning and upcoming issues, you should read
https://blog.ionicframework.com/whats-the-issue-with-issues/
https://blog.ionicframework.com/ionic-semantic-versioning-release-schedule-and-lts/

Don't forget that ionic framework is open sourced and that anyone can help fixing issues. :)

@vahidvdn

This comment has been minimized.

vahidvdn commented Jul 2, 2018

@mopi1402 If you are an Angular developer, I suggest Nativescript instead of react-native.
Here you can find why Nativescript is better than react.

@fdambrosio

This comment has been minimized.

fdambrosio commented Jul 3, 2018

I agree @mopi1402 this is one of the most used feature

@vahidvdn

This comment has been minimized.

vahidvdn commented Jul 30, 2018

Still not working in v4 beta.

@fdambrosio

This comment has been minimized.

fdambrosio commented Aug 2, 2018

it's no good that it's not working with Ionic 4

@HugoHeneault

This comment has been minimized.

HugoHeneault commented Aug 2, 2018

Ionic is an open source software guys, if you want things to get fixed quickly you can create a patch and submit a PR 👍

@nicolus

This comment has been minimized.

nicolus commented Aug 3, 2018

@HugoHeneault : It's open source software that I pay $29 a month through my pro subscription (I mean sure the framework itself is free, but it's not like they're a non-profit organization, they give the framework for free on order to make money on subscriptions), so I don't expect to have to fix it myself for free.

I can understand that it's a hard issue to fix, that ionic 4 is still beta, that it's a low priority issue... All those are perfectly valid reasons, but "it's OSS fix it yourself lol" is not.

@HugoHeneault

This comment has been minimized.

HugoHeneault commented Aug 3, 2018

@nicolus You're quite right, and I've also been complaining when the services I pay for were not working. But we should keep in mind that even if Ionic company might be making money from premium services, many devs from their teams are working a lot and need to earn their living... for a free tool that anyone can use without paying.

For me it's the way OSS work: you have no obligation on paying their services and can create awesome apps without giving a cent, but they provide services to make your life easier. I'm also paying for many pro subscriptions which doesn't mean I can't help when a fix is possible without spending days on it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment