title: Text flickering after font-size change by scroll event
body: <p>I have this JavaScript code that changes <code>font-size</code> based on <code>window.scrollY</code>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var title = document.querySelector('.title')
  var titleFontSizePX = getComputedStyle(title).fontSize
  var titleFontSizePXInt = parseFloat(titleFontSizePX)
  
  var titleFontSizeVWInt = titleFontSizePXInt * (100 / window.innerWidth)
  var titleFontSizeVW = titleFontSizeVWInt + 'vw'
  title.style.fontSize = titleFontSizeVW
  
  function updateFontSize(event) {
    console.log('fire!', event.type, window.scrollY)
    var titleSizeMax = titleFontSizeVWInt - 0.02 * window.scrollY
    var titleSizeMin = titleFontSizeVWInt * 2 / 5
    title.style.fontSize = Math.max(titleSizeMin, titleSizeMax) + 'vw'
  }
  
  var events = ['scroll', 'touchmove']
  events.forEach(event =&gt; document.addEventListener(event, updateFontSize))</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: #111;
    padding: 40vh 10vw 10vw;
    font-family: 'Rubik';
    color: white;
  }
  
  h1 {
    font-size: 12vw;
    line-height: 1em;
    font-weight: 700;
  }
  
  p {
    font-size: 1.4rem;
    line-height: 1.6em;
    font-weight: 400;
    margin-top: 2em;
    max-width: 50%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1 class="title"&gt;
    This is a big&lt;br&gt; hero copy to&lt;br&gt; say a couple&lt;br&gt; words about&lt;br&gt; this website.
  &lt;/h1&gt;
  
  &lt;p&gt;One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches
    into stiff sections. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.&lt;/p&gt;
  &lt;p&gt;The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me?" he thought. It wasn't a dream. His
    room, a proper human room although a little too small, lay peacefully between its four familiar walls.&lt;/p&gt;
  &lt;p&gt;A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with
    a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer.&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Everything seems to be working fine, except that sometimes the scroll event keeps firing multiple times, causing the text to flick in a loop. I've tested different debugging methods, like debouncing, throttling, setting <code>line-height</code> manually, etc, but none worked.</p>
  
  <p>Also, you can type in console <code>window.scrollTop(0, number)</code> to cause the flickering effect. Try different numbers. At some point it'll happen.</p>
  
  <p>Don't know for sure what is causing it, so some help would be appreciated.</p>
  
  <p>Here's a video: <a href="https://youtu.be/Kiwwcabmqcc" rel="nofollow noreferrer">https://youtu.be/Kiwwcabmqcc</a></p>
  
  <p>And a Codepen: <a href="https://codepen.io/podrivo/pen/zebWmW" rel="nofollow noreferrer">https://codepen.io/podrivo/pen/zebWmW</a></p>
  
  <p>Thanks!</p>