CODEWITHSUNDEEP
iosswiftobjective-cuiscrollviewwkwebview
Vulkan
Vulkan

Reputation: 1076

How to fix rough scrolling behavior of webView when resizing it?

Every web browser has some kind of toolbar at the bottom.

When you scroll downwards the toolbar disappears and the page becomes taller. This looks smooth on Safari and Chrome.

Safari: https://youtu.be/HKFx_zo3818

Chrome: https://youtu.be/pGNV6hBGkjo

But it looks very rough on every other browser I tested. Because the webView gets resized and rendered again.

Brave: https://youtu.be/BYqucsPArIA

It seems to look awful on Microsoft Edge, Opera, DuckDuckGo, Mozilla Firefox and Brave.

What's their secret? How does Safari and Chrome behave so smooth?

Code to initialize the webView:

    self.webView = [[WKWebView alloc] init];
    
    self.webView.scrollView.delegate = self;

    self.webView.frame =
    CGRectMake(0.0,
               0.0,
               self.view.frame.size.width,
               self.view.frame.size.height);
    
    [self.view addSubview:self.webView];

    [self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.apple.com/iphone-14-pro/"]]];

Code to resize the webView when scrolling:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    
    // Uses a global previousContentOffset variable.

    if (scrollView.contentOffset.y > 0.0) {
        
        CGFloat movement = scrollView.contentOffset.y - self.previousContetOffset.y;
        
        CGFloat allowableMovement = 10.0;
        
        // Going downwards.
        if (movement >= allowableMovement) {

            [UIView animateWithDuration:0.2
                             animations:^{
                
                self.webView.frame =
                CGRectMake(0.0,
                           0.0,
                           self.view.frame.size.width,
                           self.view.frame.size.height);
            }];
            
            self.previousContetOffset = scrollView.contentOffset;
        }
        
        // Going upwards.
        if (movement <= -allowableMovement) {
            
            [UIView animateWithDuration:0.2
                             animations:^{
                
                self.webView.frame =
                CGRectMake(0.0,
                           0.0,
                           self.view.frame.size.width,
                           self.view.frame.size.height - 80.0); // Height of toolbar
            }];
            
            self.previousContetOffset = scrollView.contentOffset;
        }
    }
}

Edit 1

I am open to using Swift.

Edit 2

I have a strong theory on how this could be done:

When you scroll downwards the touches don't pass through to the scrollView so the page actually doesn't scroll. Instead, they are used to determine how much of the toolbar should be visible (by adjusting its location to the vertical axis). When the toolbar fully appears (maybe equivalent to 50px of scrolling) the touches pass to the scrollView below and the page starts scrolling again.

Upvotes: 2

Views: 581

Answers (1)

user16930239
user16930239

Reputation: 9798

Safari Does Not Resize the WebView, instead it shows the tooltip above the WebView. (you can confirm this if try it on different websites)

Brave Browser Resize WebView from tow sides (top & Bottom) while scrolling which will make it glitchy & rough.

Solutions:

Option 1:

Do not resize, show the tool tip above the WebView.

Option 2: show the tool tip above the WebView at the beginning then resize when the scrolling stops with smooth animation (make sure to maintain the same scrolling positionafter resizing)

Option 2: Do Not show tooltip until scrolling stops

Upvotes: 2

Related Questions