Strange Footer Issue

[AARRGGHHH]

I'm having a <footer> issue that I cannot figure out.  The footer displays exactly as expected on my desktop at several different resolutions. On my iPhone, sometimes the footer displays normally, and sometimes it displays at a font size of 100% (it should be quite a bit smaller).  

The part that's confusing me is that all of the pages us identical HTML and CSS code: 
 

HTML: 

		</main>
		<footer>
			<script>footer()</script> <!-- footer() is in an external .js page so all pages read the same footer() -->  
		</footer>  
	</body>
</html>    

CSS: 

html
{
background-color:#000000;
width:100%; 
margin-left:auto;
margin-right:auto;
}
 
header 
{
background-color:#000000;
width:100%; 
max-width:1024px;  
margin-left:auto;
margin-right:auto;
}

body 
{
background-color:#000000;
width:100%; 
max-width:1024px;  
margin-left:auto;
margin-right:auto;
}

nav 
{
background-color:#000000;
width:100%; 
max-width:1024px; 
margin-left:8px;
margin-right:auto;
}

main
{
background-color:#000000;
width:100%; 
max-width:1024px;   
margin-left:auto; 
margin-right:auto;
/* float:right; */ 
}


h1, h2, h3, h4, h5, h6 
{
font-family:calibri,verdana,arial,sans-serif;
color:#938FEB;  
text-align:center; 
margin-left:auto;  
margin-right:auto; 
}

p, form, ul, td   
{
font-family:calibri,verdana,arial,sans-serif;
color:#FFFFFF; 
/* text-align:left; */ 
}

li     
{
font-family:calibri,verdana,arial,sans-serif;
color:#FFFFFF; 
text-align:left;
font-weight:bold;
}

div  
{
font-family:calibri,verdana,arial,sans-serif;
color:#FFFFFF; 
text-align:center;  
}

span  
{
font-family:calibri,verdana,arial,sans-serif;
color:#FF0000; 
text-align:center;
}

footer
{
background-color:#000000; 
width:100%;  
max-width:1024px;   
bottom:0; 
/* float:right; */
/* position:fixed; */  
margin-left:auto;
margin-right:auto;
font-size:10px; 
font-family:calibri,verdana,arial,sans-serif;
color:#FFFFFF; 
text-align:center;
}

#wrapper
{
width:100%; 
}

button 
{
background-color:#8000FF; 
border:none;
border-radius:12px;
color:white;
padding:12px 24px;
text-align:center;
text-decoration:none;
display:inline-block;
font-family:calibri,verdana,arial,sans-serif;
font-size:14px;
}

button:hover
{
background-color:#CC0000;
box-shadow: 10px 10px 10px RGBA(255,255,255,0.8);
}

a:link
{
font-family:calibri,verdana,arial,sans-serif;
color:#00CCFF;
text-decoration:underline; 
}

a:hover
{
font-family:calibri,verdana,arial,sans-serif;
/* color:#00CCFF; */
color:FF0000; 
}

a:visited
{
font-family:calibri,verdana,arial,sans-serif;
/* color:#800080; */ 
color:#938FEB;    
}

function footer()
{
			document.getElementsByTagName("footer")[0].innerHTML = 
			'<p>Line 1<br>' + 
			'Line 2<br>' +
			'Line 3<br>' + 
			'©2018 Line 4<br></p>'; 	
}

I also tried: 

function footer()
{
			document.getElementsByTagName("footer")[0].innerHTML = 
			'<div>Line 1<br>' + 
			'Line 2<br>' +
			'Line 3<br>' + 
			'©2018 Line 4<br></div>'; 	
}

and tried: 

function footer()
{
		document.write('<div>Line 1.<br>');  
		document.write('Line 2<br>'); 
		document.write('Line 3<br>');
		document.write('©2018 Line 4<br>');
}

Yes, I know, the CSS is politically incorrect because I don't use margin and padding.  That does not cause this kind of issue.  

So, how can the same HTML, CSS, and JavaScript cause different pages to print the footer in different ways on the same iPhone? 

Thank you very much!

[Ingolme]

It might be related to this: https://stackoverflow.com/questions/2545542/font-size-rendering-inconsistencies-on-an-iphone It's an issue I've encountered before where iPhone browsers try to enlarge text that's too tiny in order to make it readable.

Try adding this to your stylesheet to see if that fixes the issue.

body {
    -webkit-text-size-adjust: 100%;
}

 

[AARRGGHHH]

Amazing, that fixed it.  Thank you very much, Ingolme.