Remove or change color of frame around UIWebView document display?

Question

I'm using a UIWebView to display a variety of file types (so I can't use a specialized PDF viewer) embedded into my main view (so I can't use a modal document interaction controller). My main view has a background design that clashes with the light gray frame that appears around documents in the UIWebView. Does anyone know a way to remove that gray frame, make it transparent or change its color?

I'm familiar with and have used the techniques for changing the background color of the UIWebView to avoid a "color flash" while it loads, and for removing the top and bottom shadow that appear when "overscrolling" the web view, but I haven't seen anyone address this gray frame. (It only appears when displaying documents like .doc or .pdf, not when displaying HTML content.) I've hidden all the images that are subviews of the UIWebView's scroll view, so apparently this is coming from somewhere else.

I noticed that a bounty has been added to this question, so I went back to see where my own app ended up. Apparently this issue was resolved by iOS 5, released a couple months after I posted the question. On iOS 5 devices, changing the background color of a UIWebView -- or setting it to clearColor -- works as expected, but on iOS 4 devices the gray frame still appears. I didn't even notice that the problem had gone away, or else I would have posted back here at that time. Does that answer your question, vivianaranha? If not, perhaps you're seeing a different problem in the current iOS. — arlomedia, Oct 24 '12 at 17:09
Please refer [these link][1] hope this may help you for what you want. [1]: http://stackoverflow.com/questions/3646930/how-to-make-a-transparent-uiwebview/7575777#7575777 — Nilesh Kikani, Oct 27 '12 at 11:39

arlomedia · Accepted Answer · 2013-12-09T23:56:15.653

3

This question was written while iOS 4 was current, but in iOS 5 and later, simply setting the backgroundColor and opaque properties of the UIWebView will remove that gray frame:

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

edited Dec 09 '13 at 23:56

answered Oct 31 '12 at 18:08

arlomedia

8,534
5
60
108

1

It has been working for me up through and including the current iOS version 12.3.1. – arlomedia Jul 10 '19 at 19:18

score 0 · Answer 2 · answered Oct 23 '12 at 21:55

Since this has been around for a while I'll just throw some ideas out there.

You may be able to utilize the stringByEvaluatingJavaScriptFromString: method of the UIWebView class to manipulate the document object model if the UIWebView treats the loaded document as a page, but this method has some limitations.

Other than that, the only thing you really have left at your disposal is manipulating the view hierarchy to modify any subviews of the UIWebView, but there may not be anything for you manipulate if the UIWebView class renders the viewer directly rather than creating a hierarchy.

score 0 · Answer 3 · answered Oct 24 '12 at 12:36

0

It looks like it is not possible to remove the border from a UIWebView but could you not use CGContextDrawPDFPage() as Apple show here: http://developer.apple.com/library/ios/#samplecode/ZoomingPDFViewer/Introduction/Intro.html

answered Oct 24 '12 at 12:36

Martin

1,135
1
8
19

akashivskyy · Answer 4 · 2012-10-18T20:46:02.927

0

You can change WebView's background color by assigning its backgroundColor property:

myWebView.backgroundColor = [UIColor redColor]; // will make red bakground

If you want transparency use [UIColor clearColor] instead. But remember - by making your views tranparent you can worsen app's performance.

edited Oct 18 '12 at 20:46

answered Aug 12 '11 at 21:56

akashivskyy

44,342
16
106
116

Unfortunately that doesn't change the gray frame that appears around a .doc or .pdf file displayed in a web view. It only changes the color that appears behind that gray frame when the document is loading or overscrolled. – arlomedia Aug 13 '11 at 00:59
I think this cannot be done in current SDK. It may be possible in future versions of iOS. – akashivskyy Aug 13 '11 at 07:45
I didn't expect there would be an official method to do this, but I was hoping someone had a clever workaround like the one to hide the shadow images. – arlomedia Aug 20 '11 at 15:35

Mark Pervovskiy · Answer 5 · 2012-10-30T16:25:51.610

-1

You need a bunch of CoreAnimation magic:

- (void) hideShadowInLayer:(CALayer *) layer
{
    for (CALayer *l in layer.sublayers) {
        l.shadowOpacity = 0;
        [self hideShadowInLayer:l];
    }
}

- (void) hideShadows
{
    [CATransaction begin];
    [CATransaction setValue:(id) kCFBooleanTrue forKey:kCATransactionDisableActions];
    [self hideShadowInLayer:webView.layer];
    [CATransaction commit];
}

You need to perform hideShadows method somewhere AFTER loading your document and while you are scrolling it (I guess scrollViewDidScroll of webView.scrollView.delegate is a good place). You also need to include QuartzCore framework to your project.

What's going on here:

Any view uses something called layer for rendering. Layers can have its own hierarchy and every layer can have its own border and shadow, so the frame that annoying you is the shadow of one of them. Bad thing - UIWebView recreates it while scrolling - so you need to use this method constantly. And I guess shadowOpacity has a default animation attached to it, so you need CATransaction to disable it.

edited Oct 30 '12 at 16:25

answered Oct 24 '12 at 12:28

Mark Pervovskiy

1,123
11
18

This is pretty cool, and in my testing, the shadows are not recreated during scrolling or zooming. However, the question was how to change the color of the frame, not how to remove the shadows! – arlomedia Oct 24 '12 at 16:52
ok, add `if (l.shadowOpacity>0) { l.shadowColor = [UIColor redColor].CGColor; }` instead of `l.shadowOpacity = 0;` it will change the color of your frame – Mark Pervovskiy Oct 24 '12 at 17:00
As far as I understand, "light gray frame that appears around documents" is CALayer shadows, as I mentioned in my answer. So, my code - is removing it and make the pdf file float as it is, without border around each page – Mark Pervovskiy Oct 24 '12 at 17:07
Sorry, there's a background color that defaults to light gray, and then the shadows on top of that are separate. I think this is confusing because the question is from iOS 4; all we need now is to change the UIWebView background color to eliminate the frame I was talking about. I just added a comment to my original question above. – arlomedia Oct 24 '12 at 17:13
Ooops, you are right, it doesn't solve a problem in iOS4, sorry. – Mark Pervovskiy Oct 24 '12 at 17:31
Doesn't work in iOS12. Please amend your response as you later replied it didn't solve anything. – Martin-Gilles Lavoie Jul 09 '19 at 18:24

score -1 · Answer 6 · answered Oct 29 '12 at 08:59

Try this,

self.webview.backgroundColor = [UIColor whiteColor];

for (UIView* subView in [self.webview subviews])
{
    if ([subView isKindOfClass:[UIScrollView class]]) {
        for (UIView* shadowView in [subView subviews])
        {
            if ([shadowView isKindOfClass:[UIImageView class]]) {
                [shadowView setHidden:YES];
            }
        }
    }
}

This may help you. :-)

Remove or change color of frame around UIWebView document display?

6 Answers6

Linked