While developing, I am using the Chrome engine. Everything looks good on the web version, but when viewed on an actual device with Chrome or other browsers like Firefox, it appears differently.
Check out this image showcasing the behavior: https://gyazo.com/1d0cab6f0467c72e3cd4d64dc
The left side shows the view from my desktop while the right side is from my device.
body {
margin: 0;
display: flex;
height: 100vh;
overflow: hidden;
}
main {
overflow: auto;
height: calc(100% - 112px);
background: red;
}
.navigation {
height: 56px;
position: fixed;
bottom: 0;
width: 100%;
box-sizing: border-box;
background-color: #fff;
z-index: 6;
}
Can anyone shed some light on why this is happening?
Many thanks in advance!