Jumpy pages!

Page may contain affiliate links. Please see terms for details.

ColinJ

Puzzle game procrastinator!
I have been using my phone and tablet to access the forum this morning and have been getting caught out repeatedly on the tablet by an annoying glitch which makes the page content jump down just as I go to click something so I often end up missing my target!

The page renders before the CycleChat logo is displayed. That appears later and pushes the rest of the page down.

The phone displays things differently to fit the small screen so that is fine.

I think the tablet version needs to reserve space for the logo before rendering the rest of the page or maybe just render the logo first?

I haven't noticed this on my laptop but will check it shortly when it is available (i.e. once I drag myself out of my warm retirement bed and wander downstairs! :laugh:).
 
Well it is springtime. :okay:
 
OP
OP
ColinJ

ColinJ

Puzzle game procrastinator!
Sounds like a symptom of slow internet connection
I am on the laptop now and it doesn't have the problem, using the same wifi connection.

Hmm... I just noticed that none of the devices is running the latest version of the Chrome browser. I don't suppose that is relevant to this problem but it needs sorting out anyway - I'll be back after checking all to the latest version!
 
Last edited:

Gwylan

Veteran
Location
All at sea⛵
I have been using my phone and tablet to access the forum this morning and have been getting caught out repeatedly on the tablet by an annoying glitch which makes the page content jump down just as I go to click something so I often end up missing my target!

The page renders before the CycleChat logo is displayed. That appears later and pushes the rest of the page down.

The phone displays things differently to fit the small screen so that is fine.

I think the tablet version needs to reserve space for the logo before rendering the rest of the page or maybe just render the logo first?

I haven't noticed this on my laptop but will check it shortly when it is available (i.e. once I drag myself out of my warm retirement bed and wander downstairs! :laugh:).

Been happening on my tablet for some time. Thought it was the screen going off.
Now on the phone too!

Has some odd effects when replying to posts. Like this one. Three or four letters appeared ahead of the quote.
 
OP
OP
ColinJ

ColinJ

Puzzle game procrastinator!
You can have two devices next to each other, one with a good connection, the other not. Try disconnecting the phone and reconnecting
My phone doesn't have the problem - it renders a small logo ON the menu bar, which avoids the problem.

The tablet has the logo ABOVE the menu bar which means that the menu bar gets pushed down when the logo finally appears. It is a very consistent delay of about half a second before that happens, just long enough for me to mis-aim my finger on the touchscreen!

The tablet has the same internet speed as the laptop and phone... Old-fashioned BB, so 15-16 Mb/s download, 0.6-0.8 Mb/s upload. I can't see that that is the problem. The logo image should be in a small file and cached anyway

It might be that the processor in the tablet is straining a bit to work its way through the page rendering tasks before displaying the logo. That is why I suggested either doing the logo first or forcing a space for it and coming back later.

As for the Chrome versions... I updated the Windows version. The phone is Android 13 and the tablet is Android 11. The phone updated to a newer version but that update doesn't seem to be available for Android 11.
 

Gwylan

Veteran
Location
All at sea⛵
Sounds like a symptom of slow internet connection

Screenshot_20230407-141332.png
 

ExBrit

Über Member
I have been using my phone and tablet to access the forum this morning and have been getting caught out repeatedly on the tablet by an annoying glitch which makes the page content jump down just as I go to click something so I often end up missing my target!

The page renders before the CycleChat logo is displayed. That appears later and pushes the rest of the page down.

The phone displays things differently to fit the small screen so that is fine.

I think the tablet version needs to reserve space for the logo before rendering the rest of the page or maybe just render the logo first?

I haven't noticed this on my laptop but will check it shortly when it is available (i.e. once I drag myself out of my warm retirement bed and wander downstairs! :laugh:).

Unfortunately this is very common. If you go to the bbc.co.uk home page it will often lay itself out three times in a couple of seconds. And that's with a high end computer and 808Mb download speed. Pages are laid out in multiple passes. Your observation that space should be reserved during the first pass for images, frames etc. is spot on. In most cases it is possible to do this. Unfortunately developers tend to have faster systems than most of their users, so they don't see the problem. My dev database server is connected to my dev computer at 2Gb so I'm not going to have the same experience that a 10Mb Internet user has. I've made this mistake myself many times while developing websites.

It doesn't help that browsers have implemented HTML and CSS standards slightly differently and a layout hint that works for one browser doesn't work for others. Maybe when all browsers inherit from the Chromium engine? Who knows.
 

Gwylan

Veteran
Location
All at sea⛵
Unfortunately this is very common. If you go to the bbc.co.uk home page it will often lay itself out three times in a couple of seconds. And that's with a high end computer and 808Mb download speed. Pages are laid out in multiple passes. Your observation that space should be reserved during the first pass for images, frames etc. is spot on. In most cases it is possible to do this. Unfortunately developers tend to have faster systems than most of their users, so they don't see the problem. My dev database server is connected to my dev computer at 2Gb so I'm not going to have the same experience that a 10Mb Internet user has. I've made this mistake myself many times while developing websites.

It doesn't help that browsers have implemented HTML and CSS standards slightly differently and a layout hint that works for one browser doesn't work for others. Maybe when all browsers inherit from the Chromium engine? Who knows.

Anyone know what he said in English?
I worked, a long time ago, in a technology backwater that had its own language, TLA, did dodgy things and so on. But I have reached the age that technology moves faster than me. And I have to choose where I invest my time limited capacity
 

ExBrit

Über Member
I took a look at the source and, to put it in layman's terms, "it don't work proper on your browser mate".

The naughty bit is here. You can see the image has an explicit height of 60 pixels but the browser is not smart enough to realize that means the container should be 60 pixels high too. Some browsers are smarter than others. Ideally the <div/> would also have an explicit height.

<div class="p-header-logo p-header-logo--image">
<a href="/">
<img src="/styles/default/xenforo/cclogo2019.png" srcset="" alt="CycleChat Cycling Forum" width="300" height="60" />
</a>
</div>
 
Last edited:
OP
OP
ColinJ

ColinJ

Puzzle game procrastinator!
The naughty bit is here. You can see the image has an explicit height of 60 pixels but the browser is not smart enough to realize that means the container should be 60 pixels high too. Some browsers are smarter than others. Ideally the <div/> would also have an explicit height.

<div class="p-header-logo p-header-logo--image">
<a href="/">
<img src="/styles/default/xenforo/cclogo2019.png" srcset="" alt="CycleChat Cycling Forum" width="300" height="60" />
</a>
</div>
Interesting. I just installed Brave and tried that but it was immediately obvious that it is also a Chromium-based browser and it behaves the same way.
 
Top Bottom