Here's a puzzling situation that has me scratching my head. I have created an app used to manage an eye chart in a medical office. It's a simple interface where pressing the "20/20" button displays the 20/20 line on screen. Everything runs smoothly when accessed through browsers on Android, Windows, and Mac computers. However, things take a bizarre turn when I try to run it on iOS devices. Let me illustrate with some images and code snippets.
https://i.sstatic.net/xMt9f.jpg
https://i.sstatic.net/m02Ej.jpg
The issue is evident in these images - upon initial load, pressing a button works as expected. For example, the left image shows proper functionality on a Samsung Galaxy S9+, while the right image depicts an iPhone 11. The problem arises when attempting to load a different line using another button; the first set of letters seems to remain stuck and does not get replaced by subsequent button presses. The JavaScript logic is straightforward: "if the '20/20' button is pressed, display specific letters... if the '20/30' button is pressed, show those letters instead." However, on iOS devices, the initial letters refuse to yield to the new ones, particularly on the right half of the division. Despite thorough inspection revealing no overlapping divs or other issues, this strange behavior persists exclusively on iOS devices. Here's the HTML markup:
<div class="lineHolder">
<button class="singleButtons singleFilter" id="singleFilter" data-size="singleFilter">1</button>
<button class="singleButtons retinoscopy" id="retinoscopy" data-size="retinoscopy">RS</button>
<button class="singleButtons colorPlates" id="colorPlates" data-size="colorPlates">CP</button>
<button class="singleButtons" id="refresh" data-size="refresh">R</button>
<div class="lineContent text">
<p id="line1"></p>
<p id="line2"></p>
<p id="line3"></p>
<p id="line4"></p>
<p id="line5"></p>
<p id="line6"></p>
</div>
</div>
And here's the accompanying CSS styling:
.lineHolder{
width: 100%;
margin: 20px 0;
border-radius: 10px;
background-image: url('/images/logotranslucent.png'), linear-gradient(to top, #666 , #808080);
background-position: right bottom, center top;
background-size: 10%, cover;
background-repeat: no-repeat;
min-height: 150px;
text-align: center;
position: relative;
display:flex;
justify-content:center;
}
@media only screen and (max-width: 800px) {
.lineHolder {
background-size: 15%, cover;
}
}
.lineContent{
line-height: 40px;
align-self: center;
}
.text{
font-family: 'Sloan';
font-size: .8em;
line-height: 30px;
}
To clarify, the multiple <p> tags are utilized for displaying up to six lines based on user preference. With each button press, the JavaScript clears all lines and inserts the appropriate one. Omitting the JavaScript here since it functions correctly on all platforms except iOS. Therefore, I suspect there may be an underlying quirk or unusual aspect to the iOS platform causing this anomaly. Can anyone provide insight into resolving this issue?