CSS fixed column on table disappears on iPhone web browser - html

Question

I have a responsive CSS scrollable table with the first column fixed.
But on the iPhone web browser (Safari), the first column disappears. If you turn the iPhone on sideways/landscape, the fixed first column becomes visible. This was tested on iPhone X and 5.
On Android phones, this does not seem to be a problem.
Any idea what could be causing this problem on iPhone?
div.page {
width: 90%;
margin: 0 auto;
background: white;
padding: 0px 10px 0px 10px;
box-shadow: 0px -1px 11px 0px rgba(50, 50, 50, 0.95);
}
div.header {
width: 100%;
margin: 0 auto 5px;
padding-bottom: 10px;
background: #EBEBEB url('images/p5.png') repeat scroll;
}
.clear {
clear: both;
}
div.main {
clear: both;
}
div.calc {
width: 810px;
float: left;
}
table.calc {
border-collapse: collapse;
font-family: Calibri;
width: 808px;
border-bottom: medium silver solid;
}
#comparemob {
display: none;
}
table.calc th[scope=col] {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
}
table.calc th[scope=row] {
padding-left: 5px;
text-align: left;
font-size: 1.6em;
font-weight: bold;
width: 332px;
}
table.calc th#gross {
background-color: white;
background-image: linear-gradient(to top, rgba(128, 128, 128, 1), rgba(128, 128, 128, 0.5));
}
table.calc th#holiday {
background-color: white;
background-image: linear-gradient(to top, rgba(255, 255, 0, 1), rgba(255, 255, 0, 0.5));
}
table.calc th#empni {
background-color: white;
background-image: linear-gradient(to top, rgba(187, 86, 93, 1), rgba(187, 86, 93, 0.6));
}
table.calc th#umbfee {
background-color: white;
background-image: linear-gradient(to top, rgba(165, 129, 61, 1), rgba(165, 129, 61, 0.7));
}
table.calc th#expense {
background-color: white;
background-image: linear-gradient(to top, rgba(255, 153, 0, 1), rgba(255, 153, 0, 0.7));
}
table.calc th#salary {
background-color: white;
background-image: linear-gradient(to top, rgba(153, 153, 153, 1), rgba(153, 153, 153, 0.7));
}
table.calc th#taxable {
font-style: italic;
background-color: white;
background-image: linear-gradient(to top, rgba(166, 166, 166, 1), rgba(166, 166, 166, 0.7));
}
table.calc th#persallow {
background-color: white;
background-image: linear-gradient(to top, rgba(74, 174, 254, 1), rgba(74, 174, 254, 0.7));
}
table.calc th#married {
background-color: white;
background-image: linear-gradient(to top, rgba(128, 198, 254, 1), rgba(128, 198, 254, 0.7));
}
table.calc th#taxpaid {
background-color: white;
background-image: linear-gradient(to top, rgba(255, 0, 0, 1), rgba(255, 0, 0, 0.7));
}
table.calc th#nicontri {
background-color: white;
background-image: linear-gradient(to top, rgba(255, 51, 51, 1), rgba(255, 51, 51, 0.8));
}
table.calc th#tdeduct {
background-color: white;
background-image: linear-gradient(to top, rgba(255, 77, 77, 1), rgba(255, 77, 77, 0.8));
}
table.calc th#takehome {
background-color: white;
background-image: linear-gradient(to top, rgba(0, 204, 0, 1), rgba(0, 204, 0, 0.7));
}
table.calc td {
font-size: 1.6em;
}
table.calc td:nth-child(odd) {
background-image: url('images/Untitled-1.png');
}
table.calc tfoot th {
padding-left: 5px;
text-align: left;
background-color: #838383;
color: white;
}
table.calc tfoot td {
padding: 0px 0px 0px 10px;
font-size: medium;
background-color: #CDCDCD;
color: #666666;
}
.row1 {
background-color: #d8d8d8;
}
.row2 {
background-color: #ffffa8;
}
.row3 {
background-color: #f7b9bd;
}
.row4 {
background-color: #dac399;
}
.row5 {
background-color: #fbca81;
}
.row6 {
background-color: #d8d8d8;
}
.row7 {
background-color: #e6e6e6;
}
.row8 {
background-color: #a8d8ff;
}
.row9 {
background-color: #c7e6ff;
}
.row10 {
background-color: #ffa3a3;
}
.row11 {
background-color: #fdbfbe;
}
.row12 {
background-color: #ffcaca;
}
.row13 {
background-color: #A9F5A9;
}
/*table*/
table.rate {
border-collapse: separate;
border-spacing: 1px;
margin-bottom: 20px;
}
table.rate th,
tr,
td {
padding: 5px 10px;
}
table.rate th {
background-color: #60AFDB;
border-bottom: 5px #0066CC solid;
}
table.rate td {
background-color: #F6FDFF;
border-bottom: 1px #60AFDB solid;
}
table.rate tbody {
display: table-row-group;
border-bottom: medium #60AFDB solid;
}
#media only screen and (max-width: 740px) {
body,
div.data,
.scroll/*, .main*/
{
width: 100%;
}
div.page {
width: unset;
margin: unset;
padding: 0px 0px 0px 0px;
}
div.main {
margin: 0 auto;
padding: 0 10px 0 10px;
display: flex;
flex-direction: column;
/*padding: 0px 10px 0px 10px;*/
}
div.calc {
width: 100%;
}
table.calc th[scope=col] {
font-family: Calibri;
font-weight: normal;
}
.tabs {
width: max-content;
padding: 2px 5px 1px 2px;
}
.line {
width: max-content;
}
.mscroll {
/*width: 100%;*/
overflow-x: scroll;
margin-left: 105px;
-webkit-overflow-scrolling: touch;
}
.colfix,
#compare,
#blank {
position: absolute;
left: 10px;
}
.colfix1 {
position: absolute;
height: 20px;
width: 85px;
left: 20px;
border-bottom: 2px black solid;
border-top: 2px black solid;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
table.calc {
float: left;
width: 300px;
}
table.calc th[scope=row] {
font-size: 1.0em;
width: 100px;
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="en-gb" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<title>table</title>
<link rel="stylesheet" href="styles10.css" type="text/css" />
<style type="text/css">
a {
color: #0066CC;
}
* {
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript" src="script1.js">
<!--
//-->
</script>
</head>
<body>
<div class="page">
<div class="main">
<div class="calc">
<div style="clear:left">
<p>Test</p>
</div>
<div class="mscroll">
<table class="calc">
<tr style="border-bottom:2px black solid; border-top:2px black solid;">
<th scope="col" style="border-bottom:2px black solid; border-top:2px black solid; height:22px; padding:0 0 -2px 5px; margin: -2px 0 -1px 3px;" id="blank">
</th>
<th class="slmrow" scope="col">1</th>
<th class="slmrow" scope="col">2</th>
<th class="slmrow" scope="col">3</th>
<th class="slmrow" scope="col">4</th>
</tr>
<tr id="gr" style="display:none;" class="row1">
<th scope="row" id="gross" class="colfix" style="height: 43px">Name</th>
<td style="height: 43px"></td>
<td style="height: 43px"></td>
<td style="height: 43px"></td>
<td style="height: 43px"></td>
</tr>
<tr id="hf" style="display:none;" class="row2">
<th scope="row" id="holiday" class="colfix">Name</th>
<td> </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="emni" style="display:none;" class="row3">
<th scope="row" id="empni" class="colfix">Name</th>
<td> </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="umbf" style="display:none;" class="row4">
<th scope="row" id="umbfee" class="colfix">Name</th>
<td> </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="row6">
<th class="colfix" scope="row" id="salary" class="colfix">Name</th>
<td> </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="row8">
<th scope="row" id="persallow" class="colfix">Name</th>
<td> </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="row10">
<th scope="row" id="taxpaid" class="colfix">Name</th>
<td> </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="row11">
<th scope="row" id="nicontri" class="colfix" style="height: 43px">
Name</th>
<td style="height: 43px"></td>
<td style="height: 43px"></td>
<td style="height: 43px"></td>
<td style="height: 43px"></td>
</tr>
<tr id="hidetd" class="row12">
<th scope="row" id="tdeduct" class="colfix">Name</th>
<td><em> </em></td>
<td><em></em></td>
<td><em></em></td>
<td><em></em></td>
</tr>
<tr class="row13">
<th scope="row" id="take2" class="colfix">Name</th>
<td><strong> </strong></td>
<td><strong></strong></td>
<td><strong></strong></td>
<td><strong></strong></td>
</tr>
<tfoot>
<tr id="hidecompare">
<th class="slmrow" id="compare" style="height:19px;"><span id="comparedesktop">
Name</span></th>
<td><strong> </strong></td>
<td><strong></strong></td>
<td><strong></strong></td>
<td><strong></strong></td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
Below you can see the first column missing on iPhone:

Answer 1

I started removing your code piece by piece to see when the problem goes away. Removing <div class="mscroll"> made the problem go away. So I took closer look at the css and from there the problem seems to be in:
-webkit-overflow-scrolling: touch;
Remove that from .mscroll and it will work on iphone.
I did my best on trying to understand why this happens. But I don't seem to find any reason for it. I would assume, that your code is a bit messy and probably there is a conflict somewhere.