Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-25449

iOS: WebView content offset of 20 pixels when positioned at the top

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Critical
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: Release 7.0.0
    • Component/s: iOS
    • Labels:
    • Environment:

      6.2.2.GA, 6.1.2.GA
      Xcode 9.0.1
      iOS 11.0
      iPhone 7 simulator
      iPad Air 2 simulator

      Description

      A "fullscreen" Titanium.UI.WebView in 6.2.2.GA (older versions too, at least 6.1.2.GA) will contain a dead zone at the top which is 20dip tall (top bar sized). The bar disappears upon scrolling a page that scrolls, but if a full-screen mapping application which manages its own touches and navigation is used, the bar is constant. This does not appear on Android.

      Code to reproduce:

      // blue to illustrate the white is not from this window
      var win = Ti.UI.createWindow({backgroundColor: 'blue'});
       
      // full screen webview, background green to show the "dead" area at the top
      var webview = Ti.UI.createWebView({
      	// a webpage that has enough content to scroll and has a gray background color
          url: 'http://daringfireball.net',
          top: 0,
          bottom: 0,
          left: 0,
          right: 0,
          backgroundColor: '#00cc00'
      });
       
      win.add(webview);
      win.open();
      

      See screenshot for example. The green area (#00cc00) is the backgroundColor of the webview. If that color is unset, it defaults to white.

      I'm working around this by hiding the webview inside another view container and setting the top property to -20, but this shouldn't be necessary in my mind.

      The issue does not seem to happen if you set the top property to something farther down the page by at least 20 dips:

      // blue to illustrate the white is not from this window
      var win = Ti.UI.createWindow({backgroundColor: 'blue'});
       
      // full screen webview, background green to show the "dead" area at the top
      var webview = Ti.UI.createWebView({
      	// a webpage that has enough content to scroll and has a gray background color
          url: 'http://daringfireball.net',
          top: 20,
          bottom: 0,
          left: 0,
          right: 0,
          backgroundColor: '#00cc00'
      });
       
      win.add(webview);
      win.open();
      

        Attachments

          Activity

            People

            • Assignee:
              hknoechel Hans Knöchel
              Reporter:
              mattmendick Matt Mendick
              Reviewer:
              Vijay Singh
            • Watchers:
              1 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Backbone Issue Sync

                • Titanium SDK/CLI <> Titanium Mobile
                  Synced with:
                  TIMOB-5919
                  Sync status:
                  ERROR
                  Last received:
                  Last sent:

                  Git Source Code