Mobile issues

[Andre7]

Andre, this is still of no use. I need your design file - XAR/WEB.

I have no issues with any of you sizing on a desktop browser. It still seems slow to load.

Acorn

Can you please guide me how to send the xar file? I am not familiar with the settings on this forum. Thanks again Acorn and sorry for wasting your time.

[Acorn]

List Reply then Go Advanced and click the attachment icon.
There is a file size limit.

Acorn

[Andre7]

mobile.web

[Andre7]

I send the link. I hope i got it right.

[Acorn]

Andre, thank you for the design file.

I open locally and saw no jumping and far fewer errors.
I emulated in a range of devices with nothing untoward.
I checked in a number of browsers.

I published to Xara Cloud, https://shared.xara.com/2gjCUg8JAD, with the same results.

I have no console errors for my published version.
Rechecking your published test1.skylife.me, I still am finding a shedload of console errors.

I will leave my published one on-line for a time so you can compare responses against yours.

Perhaps if you purge and republish, that mine clear some errors.

The only difference that I can see is you have two IFRAMES, Main & Variant, for xara_iframe (www.foodbooking.com/).
If this is the issue then I would remove both and have a stand alone separate webpage for this.

Acorn

[Andre7]

Andre, thank you for the design file.

I open locally and saw no jumping and far fewer errors.
I emulated in a range of devices with nothing untoward.
I checked in a number of browsers.

I published to Xara Cloud, https://shared.xara.com/2gjCUg8JAD, with the same results.

I have no console errors for my published version.
Rechecking your published test1.skylife.me, I still am finding a shedload of console errors.

I will leave my published one on-line for a time so you can compare responses against yours.

Perhaps if you purge and republish, that mine clear some errors.

The only difference that I can see is you have two IFRAMES, Main & Variant, for xara_iframe (www.foodbooking.com/).
If this is the issue then I would remove both and have a stand alone separate webpage for this.

Acorn

What types of errors ? Can you give me advice how to avoid them. I am planning to rebuild the website and i can do with some advice not to repeat the same errors. Thank you so much for your time and all the help Acorn.
I will follow your advice and i remove the i frames

[Andre7]

Finally the problem was the scale to fit width. It causes the jumping. When i disable it all it's fine. I am very surprised that no one came across this problem. It happens with all my websites. About seven in total.
I like to hear your thoughts about this. If i am right that means STFW is not doing what it supposed to do. It also means, for best results you need 3 variants and disable STFW which is a shame because i love this option.
I am not an expert but to my knowledge i went through everything. I even rebuild 2 of my websites from scratch in case i missed something. It happens all the time. STFW on, page jump (more notable on mobile) STFW turned off, everything is perfect.

[Andre7]

Αny thoughts. Any one???

[Acorn]

Andre, I am sorry this has been a battle for you.

I have looked at your design more closely.
I think you have a couple of unnecessary conflicts happening.

When you are using scale to fit width, there is no real need to include Stretch for headers, panels & footers or the hero image.
With them set to Stretch, what seems to be happening is the page is resized but then it notices the stretch shapes need to be readjusted so there is a delay while this all cycles through.
The other problem is you have set the hero image and header & footer to be a different size to the page width - more calculations as each different shape now has its own scaling factor.

Keeping StFT, the only surprise will be Main's Pasteboard colour showing above 1600px; I suggest a middle to dark blue just light of the top bar.

Here is a rework: https://shared.xara.com/Yk0Zqsld7O.
Performance in Lighthouse is now 99%, up from 95% for Main.

I have seen the top bar resizing so what I would do is set the page background to that colour and remove the top bar entirely. Faster and no jump.

The page resize is still there but less than a quarter of what I have seen.

I would try and keep StFW as introducing a total of three designs in a transitional site design is going to slow down and disappoint everyone.

Regardless of any tweaks, I think you have good evidence to challenge Xara about this issue.

The only other solution I can think of is to fade the page in so that by the time it is fully visible, the jumping has stopped:

<style>
html, body {
  animation: fadein 2s;
}
@keyframes fadein {
  0%, 65% { opacity: 0; }
  100%    { opacity: 1; }
}
</style>

Acorn

[Andre7]

Thanks Acorn for the quick response. I see what you mean. Your example is a lot better and the jump is not very noticeable. Nevertheless I think this is a bug from Xara's part and shouldn't be happening.
I tried the code for the fade in and worked fine but not something I implement at this time as this is a client website