Font size too large until refresh in Google Chrome

  • Hello,

    When I visit my homepage (https://www.jakobrdl.dk/ + several of its underpages) in Google Chrome several of the pages show up with fonts that are larger than usual. When I update the page, the right font size comes back, but when I return to the page later, it again shows up with too large font.

    I observe the above in Google Chrome on both a Mac and Windows computer, while I don’t have the problem in Firefox on any of these computers. I have tried to clear the cache and cookies in Google Chrome, but the problem persists.

    Do you observe the problem? And if yes, do you have any ideas what might cause this problem?

    Thanks in advance for any help.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Could you point out the bit of text that has the problem & let us know what font size is the large font size (e.g. 16px)?
    Have you made sure you’re not zoomed in?
    Could it be a Chrome add-on?

    Your css includes the line around 488:
    body {text-rendering: optimizeLegibility}
    You can read about text-rendering here among other places. The article says there are known issues with Chrome, but there’s a lot to read and understand about it.

    Thread Starter jakobrosenkrantz

    (@jakobrosenkrantz)

    Thanks for your comments.

    I tried to change text-rendering, first to text-rendering: auto, which didn’t help, and afterwards I removed it entirely, which didn’t help either (both of these were implemented in style.css of my child theme).

    To be specific, this picture shows what I get when I first go to https://www.jakobrdl.dk/publications in Google Chrome. This picture shows what I get when I update the page (in Google Chrome) and in other browsers (Firefox) – and where the font size is as I want it to.

    Do you have more ideas for how to resolve this issue?

    Thanks in advance.

    I have analysed your child theme css using the W3C CSS validator service.

    ‘<style type=”text/css”>’ and ‘</style>’ should be deleted. Then revalidate until the child css comes up error free. I can’t tell if that’s the problem but its something to get right before looking further.

    Did you ever find a solution to this issue? I’m having the same difficulties. Thanks!

    Just for anyone else that ends up here… there is a known issue in chrome. You can read about it here.

    I fixed mine by just setting the body font-size to 16px instead of relying on 1.6rem.

    Thread Starter jakobrosenkrantz

    (@jakobrosenkrantz)

    I hadn’t solved the problem, but inspired by your suggestion + some of the suggestions in the link you provided, I believe to have solved the issue. Specifically, in style.css of my child theme I now have the following:

    html {
    font-size: 87.5%;
}

body {
    font-size: 14px;
    font-family: Helvetica, Arial, sans-serif;
    color: #444;
}

.arbitrary-class {
    font-size: 1.6rem; /* Renders at 16px */
}

    and as mentioned this seems to solve the problem.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Font size too large until refresh in Google Chrome’ is closed to new replies.

Tags