Webview clipped on iOS7

Question

I have developed a reader that shows on a webview the content of an html file after adding horizontal paging to it using .css. Everything was working fine but on iOS7 I have noticed that the webview is getting clipped at the left edge.

I have tried the following:

readingWebView.frame = CGRectMake(0, 0, 768, 920);   
[readingWebView loadHTMLString:loadString baseURL:nil];
readingWebView.autoresizingMask = UIViewAutoresizingFlexibleHeight |        UIViewAutoresizingFlexibleWidth;
readingWebView.clipsToBounds = false;
self.edgesForExtendedLayout=UIRectEdgeNone;
self.extendedLayoutIncludesOpaqueBars=NO;
self.automaticallyAdjustsScrollViewInsets = NO;

This is the css file I have:

html {
height:820px;
//margin:0px;
font-size:24px;
width:628px;
}

body {
margin:0px;
    padding:0px;
    width:628px;

}

#viewer {
    width:628px;
    height:820px;

}

#book {
width:628px;
height:820px;

margin-left:50px;
margin-right:50px;
//margin-top:100px;

-webkit-column-count:auto;
-webkit-column-width:668px;
-webkit-column-gap:140px;
text-align:justify;

 }

.h {
margin-top:8px;
 }

Answer 1

I think this is a CSS issue. Apparently webkit has a few different text clipping issues that can be solved just by adding   at the end of any text line. Directly after a word has been clipped.

Could you try modifying one of your html files to add   after the letters being clipped and see if it fixes it? If so we can pursue writing javascript that automatically inserts   at the correct places!

---

edit: If it does work use this javascript code:

var bodyText = "هذا هو بلدي النص الأساسي.";
var newBodyText = bodyText.replace(" ","  ");

On second thought, since you are an RTL string you might need to use this instead, not sure how string.replace function handles RTL

var bodyText = "هذا هو بلدي النص الأساسي.";
var newBodyText = bodyText.replace(" ","  ");

---

edit edit:

To do this via RegEx (ignoring HTML <*>script tags, in Objective-C I believe you would use this code (I don't know much about RegEx so if it didn't work I would just open a new question with the RegEx tag about how to do this, they can probably get you an answer within minutes!)).

NSString *string = originalHTMLString;

NSError *error = nil;
NSRegularExpression *regex = [NSRegularExpression regularExpressionWithPattern:@"(?i)(<script(?:[^>\"']|\"[^\"]*\"]|'[^']*')*>)\s+</script\\s*>|<style(?:[^>\"']|\"[^\"]*\"]|'[^']*')*>)\s+</style\\s*>|<textarea(?:[^>\"']|\"[^\"]*\"]|'[^']*')*>)\s+</textarea\\s*>|</?[a-z](?:[^>\"']|\"[^\"]*\"]|'[^']*')*>|\\S+)|\\s+" options:NSRegularExpressionCaseInsensitive error:&error];
NSString *modifiedString = [regex stringByReplacingMatchesInString:string options:0 range:NSMakeRange(0, [string length]) withTemplate:@"&nbsp; "];

finalHTMLString = modifiedString;

... Again, on second thought, since it's an RTL language you may actually use this variation of the code which puts the nbsp AFTER (left to right) the space:

NSString *string = originalHTMLString;

NSError *error = nil;
NSRegularExpression *regex = [NSRegularExpression regularExpressionWithPattern:@"(?i)(<script(?:[^>\"']|\"[^\"]*\"]|'[^']*')*>)\s+</script\\s*>|<style(?:[^>\"']|\"[^\"]*\"]|'[^']*')*>)\s+</style\\s*>|<textarea(?:[^>\"']|\"[^\"]*\"]|'[^']*')*>)\s+</textarea\\s*>|</?[a-z](?:[^>\"']|\"[^\"]*\"]|'[^']*')*>|\\S+)|\\s+" options:NSRegularExpressionCaseInsensitive error:&error];
NSString *modifiedString = [regex stringByReplacingMatchesInString:string options:0 range:NSMakeRange(0, [string length]) withTemplate:@" &nbsp;"];

finalHTMLString = modifiedString;

Answer 2

We also use UIWebView for some special content like presentation and e-books in our project and I will recommend you use viewport to make content feet the bounds.

Is easy to google details, or you can see docs on apple dev center Configuring the Viewport

Answer 3

I don't really know what the problem is, but maybe Apple has a view inside the webViewDelegate that has clipping enabled by default? ... Can you try this:

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    NSLog(@"Adjusting SubView Clippings");//<-- Wait until this logs otherwise this code hasn't been called yet, even if webView looks like it's been displayed!
    for (UIView *view in [webView subViews]) {
        view.clipsToBounds = NO;
    }
}

And also I can't see your whole project file but see if this works:
view.superview.clipsToBounds = NO;

Also, perhaps the way UIWebView interprets CSS margin tag is the culprit? Have you tried loading the page without the left and right margins and then just shrinking your UIWebView's width to create the margins in objective-c instead. Does this fix it? (clipToBounds must remain false, of course haha)

Answer 4

This is a known bug in WebKit. It happens in all RTL languages. For our app, it happens when our meta tag viewport is not wide enough to capture the entire RTL element.

If you are presenting only formatted text and possibly images, I recommend moving to UITextView.