1 pixel gap between navbar and tabbar in Android/Material design mode


#1

I have taken screen captures of the same Framework7 v1 material design kitchen sink demo when running on:

  1. Windows desktop Chrome browser
  2. Android 4.4.2 KitKat physical device
  3. Android 7.1.0 Nougat emulator/virtual machine in Genymotion

Windows Desktop Chrome browser
https ://i.imgur.com/CBlzxkY.png
https ://i.imgur.com/EnNFgfH.png
https ://i.imgur.com/NLMTSoH.png
https ://i.imgur.com/FMdp85S.png
https ://i.imgur.com/gXbNFth.png

Android 4.4.2 KitKat physical device
https ://i.imgur.com/YbXrObw.png
https ://i.imgur.com/Lk8QBsM.png
https ://i.imgur.com/iAPVFfD.png
https ://i.imgur.com/0529dqm.png
https ://i.imgur.com/F86NZFs.png

Android 7.1.0 Nougat emulator/virtual machine in Genymotion
https ://i.imgur.com/aslAPwi.png
https ://i.imgur.com/lILlFaA.png
https ://i.imgur.com/5VA2Z5g.png
https ://i.imgur.com/pzv1IOB.png
https ://i.imgur.com/iekGEkD.png

Sorry folks, I have added a space to overcome the link count limit.

In summary:

When viewed on a desktop Chrome browser, there is no visible line/gap between the navbar and tabbar which is what is expected.

However, on a real Android 4.4.2 KitKat device and a Android 7.1.0 Nougat Genymotion emulator, the WebView rendering has a 1 pixel gap between the navbar and tabbar which shows up as a horizontal white line, because we see the white background behind through the gap. As we scroll page content behind the tabbar, we can see the content showing through the white line gap. Though not very obvious, but still the line is visible.

I am not sure if this is a problem in Framework7 v1 that is unreported/unknown previously or it has been decided that it is a Android WebView rendering quirk that is not exactly a Framework7’s problem.


#2

I have noticed this with v2 with an older android 5.0.2 device but it’s fixed on an android 7 device. The sticky list groups are also busted on all mobile versions of chrome that I have tried. Fortunately, these problems are fairly easy to work around.


#3

It would be great if you can share what you did to override in the CSS to hide/remove the visible 1 pixel line gap. Or did you just live with it and left it as it is?

The only problem is it does not look as native as it should, and ugly to have a line that’s all.

I had a look today, and to me there is no error in CSS or pixel calculation.

The .navbar looks like this:

.navbar {
    left: 0;
    top: 0;
    height: 56px;
    font-size: 20px;
}

And the .navbar-fixed .toolbar, .navbar-through .toolbar

.navbar-fixed .toolbar, .navbar-through .toolbar {
    top: 56px;
}

Assuming the navbar is 56 pixels tall (y starts at 0 and ends at 55), then the toolbar/tabber starting at y = 56 (top = 56) should be seamless. I wonder why the extra 1 pixel line appears in between. There seem to be no arithmetic calculation error here.


#4

Everything is correct in math here, this is one of numerous Android rendering issues. Not sure how to fix it, but you can just add margin-top: -1px to the toolbar for Android. Anyway, it won’t bring any noticable difference, but issue will be “fixed” :slight_smile: