My webpage features both English and Portuguese languages, which can be switched by clicking a flag at the top of the page. This language swap is achieved through a class in a span. Here's an example:
<div>
<span class="por1">Portuguese text 1</span>
<span class="eng1">English text 2</span>
Some text 3 that is correct in both languages
</div>
Initially, in CSS (where English is set as the default language):
.por1 { display: none }
.eng1 { display: inline-block }
Upon clicking the flag, the languages are swapped using JavaScript.
This functionality works flawlessly on desktops without errors in W3C validation, but when it comes to mobile devices only, the texts within both spans appear smaller than text 3. Despite removing all @media, the issue persists.
If I remove the two CSS lines - .por1 and .eng1, both texts 1 and 2 show up simultaneously with the correct size. It seems like the problem is related to the display property...?
Interestingly, there appears to be a behavior where the two spans .por1 and .eng1 have CSS for mobile devices even though they do not exist in the code. In fact, debugging in Chrome reveals that the two spans do not have any special formatting applied to them.
Here is the page. Give it a look on a smartphone to see the difference in text sizes in the title already.
EDIT I have simplified the page to its maximum state. Now, take a look at the complete code including CSS:
<!DOCTYPE html>
<html>
<head>
<title>Crazy</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
body { font-size: 24px; }
.por1 { display: none }
.eng1 { display: inline-block }
h2 { font-size: 2em; }
h3 { font-size: 1.7em; }
</style>
</head>
<body>
<h2> <span class="por1">Borboletas e Mariposas</span><span class="eng1">Butterflies and Moths</span> <br> (Rhopalocera, Heterocera) </h2>
<h3> oplus <span class="por1">Borboletas </span><span class="eng1">Butterflies </span> (Papilionoidea) </h3>
<div class="inner"><span class="por1">asa-de-vidro </span><span class="eng1">Glasswing </span> (Greta sp.)</div>
<div class="inner"><span class="por1">mariposa-walker</span><span class="eng1">Walker's moth</span> (Lepidoptera, Erebidae: Sosxetra grata)</div>
<div class="inner"><span class="por1">mariposa </span><span class="eng1">herilia moth </span> (Erebidae: Letis sp. (herilia?))</div>
</body></html>
Removing the first <div class="inner"> still results in various font sizes being rendered unnaturally. However, deleting the second or third aligns the rendering correctly. Strangely, if I remove the (herilia?) from the third <div class="inner">, it displays correctly too! Similarly, eliminating the ? or oplus resolves the problem. The cause remains unclear!
EDIT 2
Check out the incorrect rendering screenshot below:
https://i.sstatic.net/m7tye.png
And here's the screenshot of the accurate rendering (select 'herilia?' removed):
https://i.sstatic.net/gTIoj.png
EDIT 3 If I modify h3 { font-size: 1.7em; } to h3 { font-size: 1.5em; }, the issue disappears!