RESOLUTION: To fix the issue, eliminate font-family, font-size, and color properties from the parent div.
UPDATE: The problem only occurs when I press CTRL + F5.
UPDATE 2: After investigating, I found that the culprit is .site-footer with a position:absolute; property. Changing it to relative seems to resolve the issue.
I'm encountering an unusual error on a website I'm currently working on. There are two issues:
Sometimes the text doesn't display at all (even though the text border is visible), but hovering over it makes it appear.
The text displays incorrectly, for example, instead of "SYDNEY," it shows "TZDOEZ." Refreshing the page or adjusting the browser window size fixes this problem.
Has anyone else faced this problem?
To clarify:
The text is NOT the same color as the background.
The text is added through plain HTML without using Javascript, PHP, etc.
I am using the Open Sans font from Google Fonts.
This issue happens regardless of what font I choose.
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="full-width">
<div class="left">
<ul class="footer-list">
<li><a href="#">Sydney</a> <span>Tel: +00 0 000 0000</span></li>
</ul>
</div>
<div class="right">
<ul class="footer-list">
<li><a href="#">Sydney</a></li>
</ul>
</div>
</div>
CSS:
.site-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
background: #000000;
padding: 10px 20px;
font-family: 'Open Sans', sans-serif;
text-rendering: optimizeLegibility;
font-size: 13px;
color: #bcbcbc;
}
.footer-list li {
display: inline-block;
padding: 0 9px;
border-right: 1px solid #666666;
}
.footer-list a, .footer-list span {
display: block;
color: #ffffff;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
}