1

Recently I ran into a weird bug where characters get shuffled/mixed when the page is loaded, not everytime but once every few loads you will see it. Kindof like a fouc except it only goes away on reload. I was wondering if someone has ever seen something like this before and can explain to me why this happens and how to solve it or prevent it from happening. For so far I couldn't reproduce this error in any browser but the original samsung browser.

The first word in the image should be ' contact', second one 'inschrijven'.

HTML:

<div class="cta-widget">
    <a class="cta-link" href="#">
        <i class="fa fa-phone"></i>
        <p>Contact</p>
    </a>
</div>

<div class="cta-widget">
    <a class="cta-link" href="#">
        <i class="fa fa-pencil-square-o"></i>
        <p>Inschrijven</p>
    </a>
</div>

<div class="cta-widget">
    <a class="cta-link" href="#">
        <i class="fa fa-user"></i>
        <p>Team</p>
    </a>
</div>

The only css used for just the text is

.c2aArea .cta-link p {
    line-height: 1.2em; 
    margin-bottom: 0;
}

Mixed up characters on load

Douwe de Haan
  • 6,247
  • 1
  • 30
  • 45
Maartje
  • 668
  • 1
  • 8
  • 23
  • Can you also provide us with the HTML and CSS you used so we can try to recreate the problem? The image helps a lot, but won't be enough I guess. – Douwe de Haan May 16 '17 at 14:23
  • @DouwedeHaan Question updated! – Maartje May 16 '17 at 15:22
  • Thanks! What font are you using? – Douwe de Haan May 16 '17 at 18:16
  • Btw, as extra information: All the characters are off by one, so `a` becomes `b`, `b` becomes `c`, etc. Very weird. – Douwe de Haan May 16 '17 at 18:26
  • 1
    The font used is roboto. A common used font, personally I never heard of this before. About the character index, that's just too weird. Well.. I'm not gonna break my head over this anymore since it only occurs once every few loads only in samsung's standard browser. Once I find out (if I'll find out) I'll post my answer here. – Maartje May 23 '17 at 10:44

0 Answers0