I have taken screen captures of the same Framework7 v1 material design kitchen sink demo when running on:
- Windows desktop Chrome browser
- Android 4.4.2 KitKat physical device
- 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.