Problems with changing background color for UIWebView with pagination mode left to right

In my iOS app, I have a UIWebView with following settings:

self.webView.paginationMode = UIWebPaginationModeLeftToRight;
self.webView.paginationBreakingMode = UIWebPaginationBreakingModePage;
self.webView.scrollView.pagingEnabled = YES;


When the content is loaded, the user can change the theme (i.e. background color and text color of the web view content). To achieve the change of themes I execute following javascript over my web view:

document.body.style.backgroundColor = bgColor;     // bgColor is some rgb color
document.body.style.color = elColor;               // elColor is some rgb color


I have an issue that the last page shows white empty box (rectangle) on my iPad mini (iOS9) in situation when the background color of the root view is dark gray and the background color of web view is set to clear in IB. The white box starts under the last paragraph and goes unitll the line where normally ends the text content for a page (when there is enough text for whole page).


I tried to set background color for document.documentElement, than I tried by setting programmatically the background color for web view and all of its subviews to clear color together by setting opaque property to NO, but none of it worked. I also tried in my javascript by setting background image pattern wich repeats unitll the html margins... But whatever I tried, in javacript or Objective-C, I still got that white box.


After detailed analysis I asume that this problem occures because of enabled pagination. The similar problem was reported on a link http://stackoverflow.com/questions/27031092/uiwebview-paginationmode-always-show-white-background-how-to-make-it-transparen?rq=1 but with no solution.


I would really like to continue using pagination in my app but I also need the feature of changing themes. What can cause this problem? How can I solve this?


*Please, avoid asking me trivial questions about views hierarchy, background colors, etc - I checked it a lot of times.

Replies

Eventually, I found out that the white box appearing is the result of bad rendering of html content into pages.


When the html content does not go untill the last page's end (bottom), the UIWebView displays white box to fulfill the empty space.


I solved this problem in two steps:

  1. when web view loads the content, I run javascript function that returns document.documentElement.offsetHeight which is approximately equalt to the actual contentSize.width of the content
  2. with that value I calculate the frame/position of a UIView that is used to cover up the white box. I added it as a subview to the web view's scroll view so nice behaviour of swipping remained the same without any complications