0

SOLUTION: Remove font-family, font-size and color from the parent div.

EDIT: The problem occurs only when I press CTRL + F5

EDIT2: I tracked down the problem to .site-footer: position:absolute; .It seems that if I change it to relative the problem dissapears.

I'm getting a weird error on a website I'm currently developing. There are 2 problems:

  1. somethimes the text is not showing at all (though the border for the text is showing) but when I hover over it, it starts displaying.

  2. The text is glitches Ex: instead of "SYDNEY" the text is "TZDOEZ" and I have to refresh the page or change the browser window dimensions to remove the problem.

Did someone else encountered the problem?

Just to be clear:

The text IS NOT the same color as the background.

The text is inserted by pure html not Javascript, PHP, etc

I use Open Sans font from Google Fonts.

It happens no matter what font I use.

<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;
}

1 Answer 1

0

Have you tried removing text-rendering: optimizeLegibility; and seeing if the bug persists?

2
  • Actually I tried adding it as an fix. It doesnt work with or without it.
    – WingmanImd
    Jul 23, 2015 at 14:10
  • EDIT2: I tracked down the problem to .site-footer: position:absolute; .It seems that if I change it to relative the problem dissapears.
    – WingmanImd
    Jul 23, 2015 at 14:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.