View on iOS (flickering)

[Nipun04]

While opening the App on iPhone, the text is flickering

[janpio]

Interesting.

Did you build the app as a native app or only as a website/pwa? What text exactly is flickering? How does it flicker for you? Does the font change?

[Nipun04]

PWA

Images are loading perfectly but the text under the chapter flickers Same for the => https://janpio.github.io/ionic-epubjs/ on iOS

[Nipun04]

Try https://janpio.github.io/ionic-epubjs/ on an iPhone

[Nipun04]

Check out this Video

[janpio]

I see what you mean and can reproduce it with the Moby Dick book on https://janpio.github.io/ionic-epubjs/ :/

The official example at http://futurepress.github.com/epub.js/reader/ doesn't seem to have the problem, so I think something we are doing is causing this, very possible that it is a side effect of using Ionic.

Will have to investigate when I have access to a proper computer again...

[Nipun04]

@janpio Did you get a chance to look into it ?

[janpio]

Not yet, sorry.

You could try some things yourself: Remove all the UI from the book.html code (everything besides <ion-content no-bounce><div id="book"></div></ion-content>) or create a second "view book" page that only shows the book. That would be my first guess into what might be causing this.

[Nipun04]

tried it Its working fine on Ionic lab but fails on iPhones when deployed

[janpio]

Ok, so even just the plain Epubjs is causing problems on iOS?

One thing you could try is to upgrade to WKWebView: https://github.com/ionic-team/cordova-plugin-ionic-webview#installation-instructions But this requires Ionic Angular 3.7.x I think, so you have to upgrade that as well.

[Nipun04]

Yes but it works perfectly on a simulator

Let me try WKWebView

[janpio]

Simulator is just that - a simulation of what could be. Real device is what counts :/

[Nipun04]

Tried these links on the iPhone

http://futurepress.github.io/epub.js/examples/ => Same Issue

http://futurepress.github.com/epub.js/reader/ => Works perfectly

[Nipun04]

Hey @janpio, I tried WKWebView Didn't work

[DadaConsultant]

I managed to fix this issue.

Basically, Iframe on IOS was the cause. So by using Css to wrap your iframe container and also styling your iframe help resolve it for me.

For example:

area {

position: fixed !important; top: 0 !important; right:0 !important; bottom:0 !important; left: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; width: 500px !important; height:800px !important; min-height:800px !important; max-height:800px !important; }

area iframe {

height: 800px !important; width: 500px; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

[janpio]

Whew, nice @DadaConsultant !

Should this be applied as a PR to the codebase?

[AlivaPaul]

hey @Nipun04 have you resolve this problem?

[ibby89]

@DadaConsultant Perhaps this solves the issue of the flickering, but it messes with the auto-flow across the page. The original styling had the width and height take up 100% of ion-content, but with this, the div container around the iframe will span a set width and height. Which means even if I style to say an iPhone 6, the iphone 6/7/8+ and iPhone X will not be covered.

The original code in 'book.html' was:

<ion-content [ngStyle]="{'backgroundColor': bgColor}" no-bounce padding>
  <div id="touchlayer" (tap)="toggleToolbars()" (swipe)="changePage($event)"></div>
  <div id="book"></div>
</ion-content>

Do you know how to style it and retain the automatic dimensions?

[DadaConsultant]

@ibby89 use css media query for different device sizes e.g.For larger screens Iphone x

@media only screen and (min-width: 413px) {

area,

area iframe {

width: xxx //your value here..

} }

[ibby89]

@DadaConsultant I don't believe that is a great way to handle the issue personally as I don't want to have to set media queries for every iPhone / iPad size in my app. Ideally, the iframe needs to resize fluidly just as before. As I predicted, the issue on iOS seems to be because the iframe, when loaded with webview, tries to resize an infinite number of times because the height is set as a percentage of the parent div (you can see one of the threads about this on the ePUB.js git here). The only way to solve this seems to be to set an explicit value so the window can pass this onto the DOM. That got me thinking that as long as the DOM does pass an explicit value, there may be another way to use '100%'. I've tested my code on my phone and in simulator and it seems to work pretty well:

.ios {
    page-book {
        #book {
            position: relative !important;
            top: 0 !important;
            right:0 !important;
            bottom:0 !important;
            left: 0 !important;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch !important;
            height: calc(100vh - 120px) !important;
            width: calc(100vw - 32px) !important;
            /* min-height:800px !important; */
            /* max-height:800px !important; */
        }
        #book iframe {
            height: calc(100vh - 120px) !important;
            width: calc(100vw - 32px) !important;
            display: block;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    }
}

Thank you @DadaConsultant for pushing me in the right direction! I want to test if this is still the case with the ePUB.js V0.3 release, will report back when I have tested,