Text at page margin edge gets cut off in WebKit webviews

[daniel-j]

Seems to be an issue with WebKit-based renderers (such as GNOME Epiphany, Safari on macOS/iOS and Foliate) combined with columns. A workaround is to wrap all nodes in mode in a container element and set a margin/padding/invisible border on it, while lowering the column-gap and outer paddings.
See this demonstration page (use a WebKit browser): https://djazz.se/files/testcss.html
Test case EPUB: https://djazz.se/files/testcase.epub

Related Foliate issue: johnfactotum/foliate#177
WebKit bug report: https://bugs.webkit.org/show_bug.cgi?id=185056

[daniel-j]

Inspected an ebook with Apple Books and found out about -webkit-line-box-contain: block glyphs replaced; that they set on the html element. This fixes the rendering issue if I set that on the CSS of my test page.
EDIT: I tried to set this on the body style of an epub and it renders correctly! Does not fix glyph overflow in vertical mode though.