display: none breaks fitting

[TheOddler]

Hey!

I have a heading on a website that I'd like to fit, however, on small screen I split up the header in two lines. I do this by having one single line title, and a split up version:

<div id="title_full">
    MY TOOOOOOO LOOOOOONG TITLE
</div>
<div id="title_parts">
    <div id="title_part_one">MY TOOOOOOO</div>
    <div id="title_part_two">LOOOOOONG TITLE</div>
</div>

And then hiding them base on media queries:

#title_full {
      @media(max-width: $smart-header-cutoff) {
        display: none;
      }
     ...
}

#title_parts {
      @media(min-width: $smart-header-cutoff) {
        display: none;
      }
     ...
}

As scripts I have three fittys for each part.

This works great, but it seems to break fitty. It works fine when opening the website, but when rezising the window in such a way that it swaps between these two titlee the fitting breaks.

Is there some setting I should use to make this work?

[TheOddler]

So I just realised that display: none actually removed stuff from the DOM, and thus Fitty won't work (as per the readme). And apparently Fitty doesn't re-initialize when something is added to the DOM again, which I guess makes sense.

To solve this, instead of using display: none; I changed it to use

visibility: hidden;
height: 0;

That seems to have fixed it. I guess it's a bit more performance intensize, as you're resizing stuff even when it's not shown, but it works for now.

However, the question still stands, is there a way to make Fitty work together with display: none?

[rikschennink]

I don't think there currently is. This looks like a good workaround. You could additionally set pointer-events: none