Rendering PDF in UIWebView iOS 8, causes a black b

Question

In iOS 8, when rendering a .PDF into a UIWebview there is a black border and background around the PDF displayed (not the whole background view). Note this is not the UIWebview background which is set to:

myWebView.opaque = NO;
myWebView.backgroundColor = [UIColor clearColor];

This is not present in < iOS8, (no black bordering coloured background around the .PDF)

Anyone else experienced this who could shed some light on this?

Im loading my PDF into the Web view like so..

- (void)viewWillAppear:(BOOL)animated
{

    [super viewWillAppear:animated];
    if (self.pdfData != nil && self.viewHasUnloaded == YES) {
        self.viewHasUnloaded = NO;
        [self.webView loadData:self.pdfData MIMEType:@"application/pdf" textEncodingName:@"utf-8" baseURL:nil];
    }
}

Answer 1

After a bit of investigating the issue I managed to understand where the problem is. So the UIWebView is an UIView, with an UIScrollView (with private class _UIWebViewScrollView) as subview. The loading of a PDF into the UIWebView goes under the following flow:
1) UIWebView starts loading the request. By this time -webViewDidStartLoad: delegate method is called.
2) After the PDF is (down)loaded the delegate method -webViewDidFinishLoad: is called. By that time the UIWebView knows this is a PDF file and a subview with a private class UIWebPDFView is already inserted into the _UIWebViewScrollView, but the PDF itself is not rendered, yet.
And here comes the problem.
3) The PDF is rendered offscreen and after it's ready a new subview with private class UIPDFPageView is inserted into UIWebPDFView and the PDF is displayed. The problem is when this insertion happens the UIWebPDFView has its backgroundColor set to black and this insertion happens after the -webViewDidFinishLoad: is called (the time depends on how big the PDF is to render). That's why it's not a good solution to go through all subviews of the UIWebView and set their backgroundColor property to white, for example.

The good news is that the UIViewController's method -viewDidLayoutSubviews is called when the UIPDFPageView is inserted into the UIWebView's view hierarchy. So, in the end the solution is to have this objective-C code into our view controller:

-(void)viewDidLayoutSubviews {
    [super viewDidLayoutSubviews];

    // Assuming self.webView is our UIWebView
    // We go though all sub views of the UIWebView and set their backgroundColor to white
    UIView *v = self.webView;
    while (v) {
        v.backgroundColor = [UIColor whiteColor];
        v = [v.subviews firstObject];
    }
}

And in Swift:

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    var v:UIView? = self.webView
    while (v != nil) {
        v!.backgroundColor = UIColor.whiteColor()
        v = v!.subviews.first
    }
}

Answer 2

I had this exact same issue, plus I was trying to zoom into my pdf after it had loaded. If this code was called prematurely it would render the pdf un-useable - you could not pan/scroll the pdf at all, you could still pinch to zoom but it only zoomed into the very top-left corner.

I initially had some code to remove the black border and zoom into the pdf after a given delay like so;

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    [self performSelector:@selector(zoomIntoPDF) withObject:nil afterDelay:0.6];
}

The 0.6s delay is useless though. It would (sometimes) still not be long enough when testing on an (in use) iPhone 4S. On the latest devices, a 0.6s hit in performance is ridiculous when it worked with a <0.05s delay.

---

@graver's solution helped me to investigate the issue. As suggested I was running NSLog(@"%@", v); in the while loop (I was also running NSLog(@"-------------"); before the while loop).

I was also calling viewDidLayoutSubviews after a delay of 0.6s like so;

[self performSelector:@selector(viewDidLayoutSubviews) withObject:nil afterDelay:0.6];

These are my logs:

-------------
<UIWebView: 0x7fd803c2e920; frame = (0 0; 320 568); opaque = NO; autoresize = W+H; layer = <CALayer: 0x7fd803c18290>>
<_UIWebViewScrollView: 0x7fd803f6a720; frame = (0 0; 320 568); clipsToBounds = YES; autoresize = H; gestureRecognizers = <NSArray: 0x7fd803f6afb0>; layer = <CALayer: 0x7fd803f6a660>; contentOffset: {0, 0}; contentSize: {320, 568}>
<UIWebBrowserView: 0x7fd80487b400; frame = (0 0; 320 568); opaque = NO; gestureRecognizers = <NSArray: 0x7fd803f65290>; layer = <UIWebLayer: 0x7fd803da2050>>
-------------
<UIWebView: 0x7fd803c2e920; frame = (0 0; 320 568); opaque = NO; autoresize = W+H; layer = <CALayer: 0x7fd803c18290>>
<_UIWebViewScrollView: 0x7fd803f6a720; frame = (0 0; 320 568); clipsToBounds = YES; autoresize = H; gestureRecognizers = <NSArray: 0x7fd803f6afb0>; layer = <CALayer: 0x7fd803f6a660>; contentOffset: {0, 0}; contentSize: {320, 568}>
<UIWebBrowserView: 0x7fd80487b400; frame = (0 0; 320 568); opaque = NO; gestureRecognizers = <NSArray: 0x7fd803f65290>; layer = <UIWebLayer: 0x7fd803da2050>>
Reachability Flag Status: -R -----l- networkStatusForFlags
Reachability Flag Status: -R ------- networkStatusForFlags
-------------
<UIWebView: 0x7fd803c2e920; frame = (0 0; 320 568); opaque = NO; autoresize = W+H; layer = <CALayer: 0x7fd803c18290>>
<_UIWebViewScrollView: 0x7fd803f6a720; frame = (0 0; 320 568); clipsToBounds = YES; autoresize = H; gestureRecognizers = <NSArray: 0x7fd803f6afb0>; layer = <CALayer: 0x7fd803f6a660>; contentOffset: {0, 0}; contentSize: {320, 273.14641744548288}>
<UIWebPDFView: 0x7fd803c02570; frame = (0 0; 320 273.146); opaque = NO; gestureRecognizers = <NSArray: 0x7fd803c239d0>; layer = <CALayer: 0x7fd803c16a70>>
<UIPDFPageView: 0x7fd80601cf60; frame = (0 7; 320 259); tag = 1000000; gestureRecognizers = <NSArray: 0x7fd803c27db0>; layer = <CALayer: 0x7fd803ddd2f0>>

As you can see, UIPDFPageView does not appear until right at the end - the third and final time viewDidLayoutSubviews was called from the delay.

---

EDIT: This is a very similar principle to @Heiko's answer but uses a recursive method rather than a timer.

There must be a better solution, such as detecting a change in the webViews subviews, but this solution works for now:

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    [self.webView setScalesPageToFit:YES];
    loopCap = 0;
    [self performSelector:@selector(hasPDFLoaded) withObject:nil afterDelay:0.05];
}

- (void)hasPDFLoaded
{
    BOOL containsPDF = NO;
    for (UIView *child in self.webView.scrollView.subviews)
    {
        if ([NSStringFromClass([child class]) isEqualToString:@"UIWebPDFView"]) {
            containsPDF = YES;
        }
    }
    if (containsPDF) {
        [self fixWebviewAndZoom];
    } else {
        if (loopCap < 20) {
            loopCap++;
            [self performSelector:@selector(hasPDFLoaded) withObject:nil afterDelay:0.05];
        }
    }
}

-(void)fixWebviewAndZoom {
    UIView *v = self.webView;
    while (v) {
        v.backgroundColor = [UIColor whiteColor];
        v = [v.subviews firstObject];
    }
    [self performSelector:@selector(zoomIntoPDF) withObject:nil afterDelay:0.05];
}

Please excuse the method and variable names, I will come up with more appropriate ones tomorrow!

As you can see, it is a recursive method which calls itself until the pdf has loaded. There is a cap to avoid any infinite loops (there should be an alert or something if it has not loaded in this time). The cap is 20 and the delay is 0.05s which allows 1 second for the pdf to load. I will probably increase the cap to 40, but I think 0.05 is ok performance wise, but I need to conduct some proper testing.

I hope this has been insightful, but I'd really appreciate some feedback or improvements to this solution.

Answer 3

I've made the answer in Swift. Feel free to use:

override func viewDidLayoutSubviews() {
    var view :UIView?
    view = PdfView as UIView
    while (view != nil) {
        view?.backgroundColor = UIColor.clearColor()
        view = view?.subviews.first as? UIView
    }
}

PDFView is the name of my UIWebView.

Answer 4

This is a mix of Heiko and gravers answers.

The view responsible for the black background is an instance of UIWebPDFView. So we can use gravers' approach, but without making every UIWebView subview white (which will mess the pages indicator).

Also, this solution makes no assumption on the UIWebPDFView position in the view hierarchy.

- (void)viewDidLayoutSubviews
{
    [super viewDidLayoutSubviews];

    [self fixWebviewBackground:self.webView];
}

- (void)fixWebviewBackground:(UIView *)view
{
    if ([NSStringFromClass([view class]) isEqualToString:@"UIWebPDFView"]) {
        view.backgroundColor = nil;
        return;
    }
    for (UIView *subview in [view subviews]) {
        [self fixWebviewBackground:subview];
    }
}

We recursively descend on all subviews, changing only the UIWebPDFView's backgroundColor.

Answer 5

I have the same problem..Unable to fix it using the suggested solution i have also tried setting the back ground color in webViewDidFinishLoad delegate fucntion but of no use..

NSLog content :

-[TextualWebView webViewDidFinishLoad:](LNo.:141) PDF VIEW< UIWebView: 0x1c5ec6d0;  
frame = (36 41; 637 810); opaque = NO; autoresize = W+H; layer = < CALayer: 0x1c5ec740>>

-[TextualWebView webViewDidFinishLoad:](LNo.:141) PDF VIEW<_UIWebViewScrollView: 0x1c5f0070;  
 frame = (0 0; 637 810); clipsToBounds = YES; autoresize = H; gestureRecognizers = <NSArray: 0x1c5f02d0>;   
 layer = <CALayer: 0x1c5ef6f0>; contentOffset: {0, 0}; contentSize: {637, 810}>

-[TextualWebView webViewDidFinishLoad:](LNo.:141) PDF VIEW< UIWebPDFView: 0x1c6e6320;  
 frame = (0 0; 637 810); opaque = NO; gestureRecognizers = <NSArray: 0x1c6e0330>;  
 layer = < CALayer: 0x1c6e6410>>

Answer 6

The simplest, but not so ideal fix is to add a border around the UIWebView of the same color as your pdf document's background color. This will prevent the ugliness to some extent until Apple fixes the issue.