Jumpy pages!

[ColinJ]

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! ).

 

[ClichéGuevara]

Well it is springtime.

 

[ColinJ]

Well it is springtime.

Spring sun, but more winter temperature - I just had to put the heating back on!

 

[potsy]

I get the same thing happening on my phone, very annoying!
Keeps directing me to NCAP

 

[PeteXXX]

I get the same thing happening on my phone, very annoying!
Keeps directing me to NCAP

# metoo!

 

[Ming the Merciless]

Sounds like a symptom of slow internet connection

 

[ColinJ]

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!

 

[Ming the Merciless]

using the same wifi connection.

You can have two devices next to each other, one with a good connection, the other not. Try disconnecting the phone and reconnecting

 

[Gwylan]

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! ).

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.

 

[ColinJ]

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]

Sounds like a symptom of slow internet connection

 

[ExBrit]

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! ).

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]

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]

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>

 

[ColinJ]

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.