I am facing an issue with my code where it splits a div into six equal parts.
It seems to work fine on desktop browsers, but on Safari/Chrome on iOS, it doesn't display correctly.
You can check the code here
In my desktop browsers, each div has a height of 50px and fills the container perfectly. However, on mobile browsers, the height is only 49px for each div, leaving a space at the bottom of the wrapper as shown by a red line in the fiddle above.
Any thoughts on why this might be happening?
<div class="fretboardWrapper">
<div class="strings">
<div class="string" id="one"></div>
<div class="string" id="two"></div>
<div class="string" id="three"></div>
<div class="string" id="four"></div>
<div class="string" id="five"></div>
<div class="string" id="six"></div>
</div>
</div>
body{
color:white;
}
#one, #three, #five {
background:blue;
}
#two, #four, #six {
background:green;
}
.strings {
height:100%;
width:100%;
position:relative;
}
.string {
z-index:2;
height:16.666%;
}
.fretboardWrapper {
position:relative;
width:100%;
height:300px;
background-color:red;
}
<script>
$('#one').text($('#one').height());
$('#two').text($('#two').height());
$('#three').text($('#three').height());
$('#four').text($('#four').height());
$('#five').text($('#five').height());
$('#six').text($('#six').height());
</script>
EDIT
Interestingly, dividing into 5 works without any issues here
Could there be a limit to decimal places when using percentages in Safari mobile?