I have a very simple cascading element, wherein separate blocks of content fade in and out on top of one another. The issue is that (1) the font size is not maintained during the transition, and furthermore, (2) the font-size of the content inside the em tag is not respected at all. This issue is only present on landscape mode on mobile devices. I can not reproduce the issue in portrait mode, nor can I reproduce the issue on a desktop browser at any size.
During both the fadeOut and fadeIn, the font size of the p appears larger. Once the transition is complete, the font size sets to 1em as defined. Interestingly though, the font size of the em remains larger even after the transition, it is only the rest of the p that sets to the defined font size.
Again, this only happens in landscape mode on mobile devices, not in portrait mode. Tested in Safari and Chrome mobile versions. Why why why does this happen? I've never encountered this before.
Below is a snippet for reference, though the issue is not reproduced therein as it's only present on mobile landscape.
$('.testimonials > p:first').show();
setInterval(function () {
$('.testimonials > p:first')
.fadeOut(1500)
.next()
.fadeIn(1500)
.end()
.appendTo('.testimonials');
}, 3500); .testimonials {
margin:50px auto;
margin-bottom: 120px;
display: block;
width:95%;
max-width: 800px;
position: relative;
}
.testimonial {
font-size: 1em;
width: 100%;
position: absolute;
display: none;
}
.testimonial em {
font-size: 1em;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="testimonials">
<p class="testimonial">
Random text 11111111 - <em>quoted as saying</em>
</p>
<p class="testimonial">
Random text 22222222 - <em>quoted as saying</em>
</p>
<p class="testimonial">
Random text 33333333 - <em>quoted as saying</em>
</p>
</div><!--testimonials-->Try This css
html {
-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}