Rendering problems in IOS 8

[ghost]

Hello!

I'm having some troubles using epub.js embedded inside a webview at IOS 8. I've already found this issue #162 but I don't know if it's exactly the same bug.

The problem is that, when I go to the next page, the text inside the iframe begins to "move", the resize event is triggered infinitely on window, and inline styles on iframe are continuously changing.

I tried to override the setLeft method using:

EPUBJS.Render.Iframe.prototype.setLeft = function(leftPos){
    this.docEl.style["-webkit-transform"] = 'translate('+ (-leftPos) + 'px, 0)';
};

but It doesn't work. The only solution that seems to work properly is defining an explicit width and height at epub declaration:

book = ePub("/path/to/book/, { width: 320, height: 400 });

Is there any other solution to this problem? I would prefer a fluid iframe instead of one width fixed sizes.

Thanks in advance!

[Anzumana]

Don't think there is a fix for this apart from the one you already mentioned. sorry

[crododile]

i dealt with a the same thing of safari constantly triggering the resize event. Solved problem by dynamically grabbing the values for width and height.
In initialization you could do something like

var width = $('#read-area').width()
book = ePub("/path/to/book/, { width: width, height: 400 });

also I overwrote the renderer.prototype.onResized on my renderer instance with something like

width = $('#read-area').width()
height = $('#read-area').height()
this.resize(width, height, true);

This appears to be almost exactly what the prototype method does, but it wasn't working. I also had to manually bind the browser resize event to trigger the function.

[donflopez]

We have a solution.

We overwrote this methods:

// iframe.js
EPUBJS.Render.Iframe.prototype.resized = function(e){
        // Get the fractional height and width of the iframe
      this.width = parseInt(window.getComputedStyle(document.getElementById('book-reader')).width);
      this.height = parseInt(window.getComputedStyle(document.getElementById('book-reader')).height);
    };


// renderer.js
 EPUBJS.Renderer.prototype.onResized = function(e) {
      var width = parseInt(window.getComputedStyle(document.getElementById('book-reader')).width),
          height = parseInt(window.getComputedStyle(document.getElementById('book-reader')).height);

        this.resize(width, height, false);
    };

[bahinapster]

@donflopez doesn't work for me

[fchasen]

Thanks all for this discussion - the auto expanding iframe in IOS are still an issue that break the rendering on IOS if you don't see the width and height.

Since we already check for mobile browsers, I think we should use that to automatically set a width and height in it isn't already set as @donflopez and @crododile showed above.

[zmanring-zz]

@fchasen Any progress on this Fred? I am implementing an iPad solution now and need some kind of work around for iOS.. thanks!

[jbhorsewriter7]

@fchasen I need this too... is there any way that we could help?

I am using the following method (hopefully this fix is still relevant):

var reader = ePubReader(FILENAME);

[Raymond26]

Setting an explicit width and height for the ePub worked for me. Although there would be this issue where the ebook would keep shifting to the right every time by a pixel or two I went to the next page, and it would reset back to normal at the start of a chapter. I fixed this by making sure that the width was always even.

if (width % 2) width = width + 1;