CLS issue in phpBB

[saavannah]

Despite numerous updates over the years, this issue has persisted across all phpBB versions.

Screenshot_2 - Copy.png

===

Screenshot_1 - Copy.png

===

origin:

Screenshot_2.png

===

Screenshot_1.png

===

Sorry, I couldn't create a topic in: Styles Support & Discussion

--Spam--

[Brf]

What issue?

[Helter Skelter]

i use onload="this.media='all'" to eliminate this when i create a style with a dark mode. it eliminates the momentary flash light mode while stylesheets load. You can try it on your main stylesheet in prosilver/template/overall_header.html
find

Code: Select all

<link href="{T_STYLESHEET_LINK}" rel="stylesheet">

replace with

Code: Select all

<link href="{T_STYLESHEET_LINK}" rel="stylesheet" onload="this.media='all'">

this is not going to solve all your issues as some info loads as it becomes available from the db and its often dependent on server resources but its a step in the right direction. The resources available to your web browsing device can also affect this

[saavannah]

It seems I've done a poor job of describing the issue through the screenshots. There's a red box on the top menu, which appears fully, then disappears to become abbreviated. This issue is named '--spam--'. I apologize again for any confusion.

[Brf]

Please explain the issue yourself, rather than linking to off-site URLs.

I am not seeing your issue with styles. Perhaps it is your slower internet connection, not loading all the stylesheets at once.
On my phone, I am not seeing any wrap in your example pages.

[saavannah]

spam link? do you think I own semrush website? OMG

anyway, I don't think the problem is with my phone. It's actually a real issue.

thanks..

[invenio]

Sorry, I don't get what you are trying to say is an issue here. Those screenshots look normal.

Can you please describe, in detail, what you think the problem is?

[saavannah]

1. Initially, upon page load, you will notice that the top menu items are fully displayed across two lines, occupying a larger space.

1.png

2. However, after a few moments, these items are condensed into a single line, taking up a smaller area.

2.png

[Brf]

what you are trying to say is an issue here.

I am guessing it has something to do with the breadcrumb line wrapping in one screenshot and not wrapping in the other, with ellipsis at the end.
On my phone there is no wrap and no ellipsis.

[invenio]

what you are trying to say is an issue here.

I am guessing it has something to do with the breadcrumb line wrapping in one screenshot and not wrapping in the other, with ellipsis at the end.
On my phone there is no wrap and no ellipsis.

I don't see that happening with phpBB.com when I load it on either mobile or desktop browsers. But it also loads almost instantaneously so maybe I am missing it. At the end of the day if it just during the loading of the page does that really matter? I mean it's not uncommon for web pages in general to be not in their final completed form during loading.

[Brf]

I don't see that happening

On my computer, I can open that topic from the example, squeeze my window as narrow as it goes, and then press <crtl>+ a few times to make the font bigger.
Then, if I F5, I can see the page flashing quickly to put in the ellipsis in place of the wrap. I bet that is what the OP is complaining about.

[saavannah]

this issue happen in the phones.. not pc.

[Brf]

this issue happen in the phones.. not pc.

Indeed. My example was showing a way to duplicate your problem on a PC, since we cannot duplicate it on our phones.

[Mannix_]

It all comes down to how fast your connection is and how fast your browser can parse the javascript responsible for truncating the breadcrumbs

[halil16]

Well... My solution was to prevent the links from being cut and make all the breadcrumbs like this.
https://web.dev/articles/css-scroll-snap