Home/ Questions/Q 8445297
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T09:37:18+00:00

I’ve isolated some weird behavior that seems to occur when you have a block

  • 0

I’ve isolated some weird behavior that seems to occur when you have a block which is styled overflow: hidden, and uses a font declared with @font-face (I’ve been using Google Web Fonts). clientHeight doesn’t correspond to the real height of the element — seems to be somewhat shorter. I’ve reproduced in Chrome & in Firefox. Does anyone know what’s going on here?

(Unfortunately it won’t reproduce in JSFiddle, but here’s the code — if you look at this in your browser unmodified you should see about ~80% of the paragraph.) (https://gist.github.com/2702563)

<!DOCTYPE html>
<html>
    <head>
        <link href='http://fonts.googleapis.com/css?family=Tenor+Sans|Esteban' rel='stylesheet' type='text/css'>
        <style>
            #demo{
                width: 30em;
                            /* comment either of the lines below out and it'll work */
                overflow: hidden;
                font-family: 'Esteban';
            }
        </style>
    </head>
    <body>
        <div id="demo">
            <p>I give Pirrip as my father's family name, on the authority of his
            tombstone and my sister,&mdash;Mrs. Joe Gargery, who married the blacksmith.
            As I never saw my father or my mother, and never saw any likeness
            of either of them (for their days were long before the days of
            photographs), my first fancies regarding what they were like were
            unreasonably derived from their tombstones. The shape of the letters on
            my father's, gave me an odd idea that he was a square, stout, dark man,
            with curly black hair. From the character and turn of the inscription,
            &ldquo;Also Georgiana Wife of the Above,&rdquo; I drew a childish conclusion that
            my mother was freckled and sickly. To five little stone lozenges, each
            about a foot and a half long, which were arranged in a neat row beside
            their grave, and were sacred to the memory of five little brothers of
            mine,&mdash;who gave up trying to get a living, exceedingly early in
            that universal struggle,&mdash;I am indebted for a belief I religiously
            entertained that they had all been born on their backs with their hands
            in their trousers-pockets, and had never taken them out in this state of
            existence.</p>
        </div>
        <script>
            document.getElementById('demo').style.height = document.getElementById('demo').clientHeight + 'px';
        </script>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It looks like the script is interpreted before the font is applied to the parragraph. If you deactivate the webfont, the height of the box is exactly as expected: The whole paragraph is readable.
    If you debug the code and set a breakpoint at the script and continue execution after the page finished loading, there is no unexpected height.

    You can fix the problem by executing the script in the window.onload-event so the clientHeight is read after the webfont is applied:

    <!DOCTYPE html>
<html>
   <head>
      <link href='http://fonts.googleapis.com/css?family=Tenor+Sans|Esteban' rel='stylesheet' type='text/css'>
      <style>
         #demo{
            width: 30em;
            overflow: hidden;
            font-family: 'Esteban';
         }
      </style>
   </head>
   <body>
      <div id="demo">
         <p>I give Pirrip as my father's family name, on the authority of his
           tombstone and my sister,&mdash;Mrs. Joe Gargery, who married the blacksmith.
           As I never saw my father or my mother, and never saw any likeness
           of either of them (for their days were long before the days of
           photographs), my first fancies regarding what they were like were
           unreasonably derived from their tombstones. The shape of the letters on
           my father's, gave me an odd idea that he was a square, stout, dark man,
           with curly black hair. From the character and turn of the inscription,
           &ldquo;Also Georgiana Wife of the Above,&rdquo; I drew a childish
           conclusion that my mother was freckled and sickly. To five little stone
           lozenges, each about a foot and a half long, which were arranged in a neat
           row beside their grave, and were sacred to the memory of five little
           brothers of mine,&mdash;who gave up trying to get a living, exceedingly
           early in that universal struggle,&mdash;I am indebted for a belief I
           religiously entertained that they had all been born on their backs with
           their hands in their trousers-pockets, and had n ever taken them out in
           this state of existence.</p>
        </div>
        <script>
         window.onload = function(){document.getElementById('demo').style.height = document.getElementById('demo').clientHeight + 'px';}
        </script>
     </body>
</html>
    • 0