Android webview and Twitter bootstrap fixed navbar can't be clicked

Question

I use Twitter Bootstrap 3 and fixed top navbar.
I have a Webview inside my android application.

I added many features to my app for weeks but I couldn't find a way to solve this issue. Everything works fine generally.
User clicks in a link in fixed top navbar and webview loads new URL.

But when
* user loads a webpage
* then goes to bottom of page
* goto top of page
[PART 1 starts]
* user clicks navbar link
* navbar links can't be clicked
* links doesn't respond
[PART 2 starts]
* user scrolls page to down in a very small amount (say 1-2 mm.)
* vertical scrollbar appears in right
[PART 3 starts]
* user clicks link
* navbar links are clickable.

I'm sorry that I can't provide application codes here but I can do my best for debugging questions. I pasted PART 1, 2 and 3's logcat results below.

Fiddle: http://jsfiddle.net/mavent/X3THf/19/

<nav class="navbar navbar-inverse navbar-fixed-top visible-xs" role="navigation">
    <div class="navbar-header" style="text-align:center;">
        <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-part2"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

        </button>
        <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".navbar-part3" style="padding: 3px 15px;">
            <img src="http://www.wdc.com/Global/images/icons/icon_supporthelp.gif" width="24" height="24" alt="aaaa">
        </button>
        <div style="padding-top: 15px;"> <a href="/page0" title="aaa" style="color:#ffffff;margin-top:40px;">Example.com</a>

        </div>
    </div>
    <div class="collapse navbar-collapse navbar-part2">
        <ul class="nav navbar-nav">
            <li><a href="/page1">page 1</a>

            </li>
            <li><a href="/page2">page 2</a>

            </li>
        </ul>
    </div>
    <div class="collapse navbar-collapse navbar-part3">
        <ul class="nav navbar-nav">
            <li><a href="/page3">page 3</a>

            </li>
            <li><a href="/page4">page 4</a>

            </li>
        </ul>
    </div>

In my webview I don't make very specific actions. It is a common webview.

mWebView = (WebView) findViewById(R.id.webview);
mWebView.setWebChromeClient(new myWebChromeClient());
mWebView.setWebViewClient(new myWebViewClient());
mWebView.getSettings().setJavaScriptEnabled(true);
String defaultUserAgent = mWebView.getSettings().getUserAgentString();
mWebView.getSettings().setUserAgentString(defaultUserAgent+" my app");

.

[PART 1]
11-09 13:27:03.522  17315-17355/com.example.android E/webcoreglue﹕ Should not happen: no rect-based-test nodes found
11-09 13:27:03.612  17315-17315/com.example.android V/WebViewInputDispatcher﹕ blockWebkitDraw
11-09 13:27:03.612  17315-17315/com.example.android V/WebViewInputDispatcher﹕ blockWebkitDraw lockedfalse
11-09 13:27:03.622  17315-17315/com.example.android V/webview﹕ singleCursorHandlerTouchEvent -getEditableSupport  FASLE
11-09 13:27:03.923  17315-17355/com.example.android D/webview﹕ blockWebkitViewMessage= false

[PART 2]
11-09 13:27:32.711  17315-17315/com.example.android V/WebViewInputDispatcher﹕ blockWebkitDraw
11-09 13:27:32.711  17315-17315/com.example.android V/WebViewInputDispatcher﹕ blockWebkitDraw lockedfalse
11-09 13:27:32.711  17315-17315/com.example.android V/webview﹕ singleCursorHandlerTouchEvent -getEditableSupport  FASLE

[PART 3]
11-09 13:27:42.650  17315-17315/com.example.android V/WebViewInputDispatcher﹕ blockWebkitDraw
11-09 13:27:42.650  17315-17315/com.example.android V/WebViewInputDispatcher﹕ blockWebkitDraw lockedtrue
11-09 13:27:42.650  17315-17315/com.example.android V/webview﹕ singleCursorHandlerTouchEvent -getEditableSupport  FASLE
11-09 13:27:42.961  17315-17355/com.example.android D/webview﹕ blockWebkitViewMessage= false
11-09 13:27:48.176  17315-17355/com.example.android I/GATE﹕ <GATE-M>DEV_ACTION_COMPLETED</GATE-M>
11-09 13:27:48.256  17315-17315/com.example.android W/IInputConnectionWrapper﹕ getSelectedText on inactive InputConnection
11-09 13:27:48.256  17315-17315/com.example.android W/IInputConnectionWrapper﹕ setComposingText on inactive InputConnection
11-09 13:27:48.256  17315-17315/com.example.android W/IInputConnectionWrapper﹕ getExtractedText on inactive InputConnection

So everytime navbar links doesn't function, user must make some scroll on page and then click the link.

I am having the exact same issue on android 4.3, using Bootstrap 3. Were you ever able to find a solution? — Mike_G, Dec 05 '13 at 20:34

score 0 · Answer 1 · edited May 23 '17 at 12:29

After 6 months this problem still exists. So answer below doesn't solve the issue.

~~The cause is an error in jelly bean. There is a workaround that works perfectly.~~

I created a new WebView class and I used myWebView class instead of default WebView class. This topic helped me much: Android WebView JellyBean -> Should not happen: no rect-based-test nodes found

public class MyWebView extends WebView
{
    Context mContext;

    public MyWebView(Context context)
    {
        super(context);
        mContext = context;
    }

    public MyWebView(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        mContext = context;
    }

    public MyWebView(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);
        mContext = context;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN){

            int temp_ScrollY = getScrollY();
            scrollTo(getScrollX(), getScrollY() + 1);
            scrollTo(getScrollX(), temp_ScrollY);
        }
        return super.onTouchEvent(event);
    }
}

For some reason getScrollY and scrollTo are not being recognized in Eclipse. Im using PhoneGap and trying to trying to implement in my class that extends DroidGap. — Mike_G, Dec 06 '13 at 15:03
And now i just realized that issue isnt like yours. My very top button is tappable, but only at its upper edge. http://stackoverflow.com/questions/20409632/android-4-3-and-phonegap-cant-tap-link — Mike_G, Dec 06 '13 at 15:11

score 0 · Answer 2 · answered Dec 03 '14 at 20:41

I take it from your edit on June 4th that the problem still exists and maybe due to an issue in Android JB.

Even if not an issue in Android, bootstrap 3 does not support the Android browsers which is used by the webview in JB.

The only solution that I'm aware of is to use Intel's crosswalk project (probably via Cordova or Google's CCA) to bundle a current version of Chromium as your webview, rather then depending on the platform's webview, the capabilities and quirks of which vary enormously depending on Android version.

Downside of this is an extra 18MB, which I'm sure you don't want, but this way you get a consistent webview for your app across all versions of Android.

Thank you for suggestion. I didn't know about crosswalk. But additional 18mb is very huge for our 3mb application :) — trante, Dec 04 '14 at 22:00

Android webview and Twitter bootstrap fixed navbar can't be clicked

2 Answers2