Not a bug 2.1 - CLS when sub headings turned off and description spans 2 lines

B

briansol

Well-known member
Affected version
2.1
There is a problem with the way this code block is hidden which causes a CLS indicator.

node_list_forum
Code: 
<xf:if is="$descriptionDisplay != 'none' && $node.description">
                    <div class="node-description {{ $descriptionDisplay == 'tooltip' ? 'node-description--tooltip js-nodeDescTooltip' : '' }}">{$node.description|raw}</div>
                </xf:if>

I am using default theme, just some color changes.

When there is a forum description that is long and pushes a line return, AND the display is turned off, the description actually shows quickly, then disappears and causes a CLS shift up when it is removed as it reverts to 1 line, resulting in increased CLS score and reduced google preference.

I've noticed at least 5 other sections that are doing this by setting my network tab to super slow. Lots of font changes/sizes, hidden text, etc.

Please try a review for 2.2 beta 2.
 
It's worth confirming these things on 2.2 at this point as there are a number of changes for this sort of stuff there.

Regarding the main report, unless I'm misunderstanding the requirements, you should be able to reproduce the description jumping here. I can't even with slow 3G emulation. While there is some JS involved in hiding the descriptions, it's done via the preamble JS which is executed in the <head> and thus should avoid the flash that might otherwise occur.
 
In order to reproduce here, you would have to have a forum category with a very long title that forces a line break. AND clear all your cache's so you download the js / css from scratch.

gap.png

update the description in the oval to something VERY long so it line brakes.
in the rectangle, you will see this text show up and if it's long enough, it shifts to add the 2nd line. It will, then disappear and thus go back to 1 line when you set a slow network in dev tools when the css/js kicks in to make it a tooltip.

i throttle it back like this in chrome:

throttle.png
 
Last edited:
In the amount of space allocated for the description, the announcement forum description actually has enough content to be on multiple lines. Indeed basically every forum above the fold does.

While I couldn't really wait for the whole process with a 10kbit/s throttle (which is probably a bit ridiculous), I couldn't reproduce the behavior with a 100kbit/s throttle either. The description is never visible. The only way this would happen is if the page renders before preamble.js executes, which shouldn't be the case based on how JS rendering works.

However, I just had a look at your site and I suspect the cause may be that you have Rocket Loader enabled. That will change how the JS is executed.
 
Good sleuthing! I turned off rocket loader at cloudflare and i can't reproduce it now either.

but, i do want to use it as it has a big impact to other things loading faster. Is there a better way to set it up so that by default the css keeps it not visible even if the js loads late? many folks use cloudflare so it's an item to consider in the design patterns of these things.
 
If you want to make manual modifications, you may be best trying to setup specific exemptions from RocketLoader:

support.cloudflare.com

How can I have Rocket Loader ignore specific JavaScripts?

Learn how Rocket Loader ignores specific Javascripts.OverviewYou can have Rocket Loader ignore individual scripts by adding the data-cfasync="false" attribute to the relevant script tag, for exampl...
support.cloudflare.com support.cloudflare.com

The point of having preamble.js in the <head> tag is specifically so it does get executed before the page downloads, generally because we want to do specific detections on the browser. If they were done later, then you run the risk of a flash like this. This likely applies to things beyond the node descriptions, so setting up a specific exemption in your situation seems like the best approach.
 
Back
Top Bottom