iOS movement of <div>'s when pinch zooming

Before I expand, here is the site which causes movement of my bottom <audio> tag up when zooming on my iPhone. When it moves up, it overlaps the <div>'s above it.

Regular OS, there is no problem at all.

http://www.lovesongforever.com/whitehouse

HTML:

<section class=“content”>
<img class=“whitehousepic” src=“White_House_Support/White_House_pics/White_House.jpg”>
<section class=“songtitle”>
Gloria In Excelsis Deo
</section>
<section class=“copyright”>
(c) Johann Sebastian Bach
</section>
<section class=“caroler”>
as sung by an unknown Caroler<br>
in front of the White House<br>
on December 24th, 2018
</section>
<section class=“audioWrapper”>
<audio id=“theSong” class=“aSongControl” controls preload=“auto”>
<source src=“audio/Lafayette_Square.m4a” type=“audio/mp4”>
<a href=‘http://www.apple.com/quicktime/download/’ title=‘Get Quicktime’ onclick=‘window.open(this.href); return false’>
Install Quicktime to hear this awesome Hymn
</a><br>
</audio>
</section>
</section> <!-- content –>

CSS:

.content {
	position: relative;   /* for siblings with absolute positioning */
	
	margin:  0;	
	padding: 1.5em;
		
	background: white url(White_House_pics/music_notes.gif);

	border-style:  solid;
	border-color:  red;
	border-radius: 5em;
	border-width:  .2em;
}

.whitehousepic {
	display: block;    /* center ... */
	margin:  0 auto;
	
	/* 359px X 268px */
	width:  22.4375em;
	
	max-width: 80%;    /* squeeze width because of .content's rounded corners */
	height:    auto;
			
	padding-bottom: 1.0em;	
}

.songtitle {
	text-align:  center;
	font-size:   2.0em;
	font-weight: bold;
	color:       #996633;
	
	padding-bottom: .5em;
}

.copyright {
	text-align: center;
	font-size:  2.0em;
	font-style: italic;
	color:      red;
	
	padding-bottom: .5em;
}

.caroler {
	text-align: center;
	font-size:  1.70em;
	color:      blue;
	
	padding-bottom: 1.0em;
}

/* do the positioning within the Wrapper */
.audioWrapper {
	display: block;     /* center within .content ... */
	margin:  0 auto;

	width:  90%;        /* squeeze width because of .content's rounded corners */
 /*
	height: auto;       // works, with and without, on all Browsers //
 */
}

/* do the sizing within the Audio Control */
.aSongControl {
	width:  100%;        /* fill the Wrapper */
 /*
	height: auto;        // does not work on Google's Chrome and Opera ?? //
 */

	font-size: 120%;     /* for non-support text ... */
	color:     #990099;
}

/*
	This is the audio control-specific Selector.
	Other Selectors handle position and sizing.
*/
audio {
	background-color: transparent;
}

#theSong {
	/*
		deliberately empty just to initialize
		certain <audio> parms, e.g., the volume
	*/
}

RECAP:

movement of my bottom <audio> tag up when zooming on my iPhone. When it moves up, it overlaps the <div>'s above it.

regular OS has zero problems with zooming.

Hi,

It appears to be an ios bug that can’t be corrected as far as I can see. You would need to file a bug report with webkit and hope that years later it may be fixed. :slight_smile:

You can see that the displacement occurs on any audio file like this one.

I tried a number of things to see if I could affect a difference but they failed to address the problem. I’m guessing it can’t be fixed as it is a specific bug created by the shadow dom content of the audio player and pinch and zoom function.

However the bug only really becomes obvious at exorbitant zooming so is probably never noticed by anyone. As your mobile text is way to small for me to read I would suggest that you add a media query and increase the size of the text on smaller window sizes. You seem to be using a progressive font-sizing effect based on vw units but most developers do not realise that text actually needs to be larger on mobile devices and not smaller. Therefore I prefer a few well placed media queries to control the text rather than to attempt an automatic scale system (unless you implement a minimum font-size of the scaling). However I still prefer slightly larger text on mobile anyway (at least 16px for paragraphs etc).

If you did this then there would be little need for your visitors to pinch and zoom and the problem goes away.

You are losing a lot of space at the sides with your centred design when you should let it go edge to edge once down to below 480px (approx) and that would allow room for larger text to be displayed. I would also think about reducing those large rounded corners on smaller sizes also.

The mobile view doesn’t have to exactly mimic the desktop view and you need to make better use of the space available at smaller width.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.