CSS overflow messes up font size

Hey there!

I have this strange bug here where when I set an overflow property in my css the font-size appears way larger than before; but (that’s the fun part), this happens only when I land on the page for the first time. When I refresh the page, text/fonts appear like they “should” (i.e. same as without the overflow override).
Also this only happens on mobile.

Any ideas about where this could come from, but above all: is there any possibility this could be Zapworks related?

Thank you for the pointers!
Best
Thomas

Hi there!

Could you perhaps share a minimal example with us?

My bad! forgot to attach the screenshots :grimacing:

In case you were asking for some code, the html structure is basically like so:

   <div id="page-about" class="page page-container"  style="visibility: hidden;">
        <div class="page-content">
            <h1>
               TITLE
            </h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
       </div>
    </div>

with this code block right inside <body> (so same level as my <a-scene>).

I’m trying to put overflow: auto; on the page-container class.
The screenshot with “fat text” is with overflow: auto;, the “normal” one without.
The “normal” screenshot is also what I have when I add the overflow, land on the page for the 1st time (text looks fat), and then refresh (back to normal).

Let me know if I can give you more useful info.
Thanks for your help!

Thomas!

50

(second screenshot here, the editor won’t allow me to attach more than one image as a new user)

39

Replying to myself, and for those hitting the same problem; adding this meta tag solves the problem.
Never had to use it before, but I guess it’s good practice?

<meta name="viewport" content="initial-scale=1.0">
1 Like