Text is cut on edges of P tags

[stormcrow85]

Hi,

I'm using a custom implementation of the following demo:

http://test.monoclejs.com/test/showcase/01-velveteen/full.html

On certain sentences the text is getting cut on the right side rather than breaking one word before and preventing it. Tried adding margin, padding, tried changing the P width to 90% and tried various other things but none seem to work.

The funny thing is that in the original demo the text is also cut a bit on the edges, so i'm not even sure it's a problem with my implementation.

Any help would be greatly appreciated.

Ran

[ddrscott]

I'm also having the same issue on Galaxy Note 3. Seems like the pagination width is measured incorrectly so the viewport of the rendered content is drifting further and further after each page turn.

[bcharp]

I'm having a "drifting" problem too on android (Moto X, 4.4.2, in Genymotion). When I turn page, the content get cropped on the left more and more. I think it happens more on device with pixelRatio of 2.

After some investigation I found a rounding issue. My iframe is 324px width. In the pageDimensions() :

  function pageDimensions() {
    var elem = p.page.m.sheafDiv;
    var w = elem.clientWidth;
    if (elem.getBoundingClientRect) { w = elem.getBoundingClientRect().width; }
    if (Monocle.Browser.env.roundPageDimensions) { w = Math.round(w); }
    return { col: w, width: w + k.GAP, height: elem.clientHeight }
  }

the value of

w = elem.getBoundingClientRect().width;

is 324.876 The rounding set it to 325. And there I'm having 1px that will be multiplicate by my number of page. I don't know where the width of the iframe is set, maybe a rounding there can help.

[svrx]

I am experiencing the same issue, even on Chrome since the latest update. Thanks very much for you findings @bcharp.

Did anyone have created a pull request for the fix?

[bcharp]

I made a really dirty fix for my case where I change the round to a floor. Seems to work on Android. But I'm really not sure of the behavior elsewhere and it don't seems like a good , safe and proof solution to me, so I didn't make a pull request.

[waynesalhany]

Changing round to floor did not work for me. I'm not sure why. I am trying to get this to work in IE. My results are mixed when I go to Safari, Chrome and Firefox. I am still hoping and searching for a fix.

[bcharp]

I think this is related to that kind of stuff http://ejohn.org/blog/sub-pixel-problems-in-css/ . Maybe setting/reseting the iframe width with pixel value can help.

[joseph]

Yep, that's a good suggestion.

You can also try the latest master, where I merged a recent related change yesterday.

[svrx]

@joseph just got the latest version from master, and seems like the problem remains.

Tomorrow will give a deeper look at the problem, meanwhile if anyone solve it for good. Let me know. :smiley:

[stormcrow85]

Could it be that the latest chrome update fixed this?

Chrome 33.0.1750.146:

Chrome 33.0.1750.149:

[svrx]

The problem in Chrome remains, even after the update, in my case. In Chrome an Opera the content is drifting to the left 1px each page you turn. In IE 11 and Firefox, it's fine.

[stormcrow85]

@svrx, for me too.. in some books the problem is gone, in some books it remains. I can't explain that

[joseph]

I still have not been able to reduce this to a test case, but I have pushed another significant change in the dev-bug-column-drift branch.

We now ensure that the frame width and the column width are the same: a rounded, even integer. That should crush the bug, and in my testing, it has no ill effects in IE10/11, Chrome, Gecko, Android 4, iOS. (Waiting on a device to charge for Android 2, which is notoriously weird about fixed iframe widths...)

If you have continuing problems, I'd really appreciate any/all of the following:

• Platform
• Browser (inc version)
• Screen dimensions
• Monocle reader dimensions
• The margin properties and computed dimensions of the page and sheaf and iframe elements, if you can extract this from a web inspector
• Ideally, a reduced test case as a pull request in test/bugs

Thanks.

[joseph]

I updated the branch again with a fix for a much more obscure bug in recalculateDimensions, sometimes triggered by rapid resizes firing.

[svrx]

Great @joseph, just tried your changes and it's working perfectly now. Well at least in Opera, Chrome and IE 10/11.

Cheers.

[stormcrow85]

Thanks @joseph ! Seems like it's fixed (checked with latest chrome, FF, IE11-10 and Safari for Windows)

[joseph]

Cool, this is in master now, so I'll close the issue.