I had this very strange bug that didn’t show up in Desktop browsers (Chrome and Firefox) but in Mobile browsers, specifically iOS Safari and Chrome.
Since I couldn’t find a way to debug on the Mobile browsers, I had spent quite a while trying to figure out what went wrong. It’s also very strange to actually see the texts that have more than 1 word to appear, but yet it only shows the first word.
So I checked the HTML code from Chrome and saw this:
<li> " Face " </li>
That’s because in my PHP code, I had actually echoed the text on a new line like this:
<li> <?php echo $tag; ?> </li>
Out of curiosity and pure trial-and-error, I had decided to try this:
<li><?php echo $tag; ?></li>
To produce this:
That solved the bloody issue I had been investigating for many hours.
I think I really need to re-learn the basics of HTML.