Unfound bug

[Egg Bramhill]

I have a site I've been working on and upto yesterday it was working fine. The site is set to 'Scale to Fit Width'. After working as expected suddenly it's developed a horizontal scroll bar and on browser page resize the content is often ofset to the left with white space to the right, often correcting itself after several seconds but not all the time.

Attached is a cut down version of the site, single page only. And help would be appreciated.

[Acorn]

Egg, I am assuming you see this if you are changing the browser width across a range of sizes by dragging the edge.
When you do this Xara has to recalculate a scaling factor. This can invoke the browser's showing of the control bars until the calculation has been applied.

I can see in your example the H-scroll persists in the Variant.
Some widths are showing a small gap on the left.

I get rid of the H-scrollbar with some Website Head code:
<style>
html, body {
max-width: 100%;
overflow-x: hidden;
}
</style>

Another you can try is:

<style>
html, body {
contain: paint;
}
</style>

I would read https://css-tricks.com/almanac/properties/c/contain/ for this.

I have not checked interference with other all Xara features but Sticky seems OK.

I did note that your background was larger that the page height.
Also, your Highslide code is failing with an undeclared variable, hs.
As you use Firefox, I have my usual suspicions here but I have no checked.

Acorn

[Initiostar]

Egg, I can see the repeating group headline in the mobile variant is wider than the mobile page; I reduced "Irure incididunt" from 487px to 480px and the horizontal bar disappears; in Firefox too. As per Acorn's suggestion, adjusted the page height too.

[Acorn]

@xara - Another found 'Unfound Bug'.

Since you moved to including asynchronous loading, you failed to test HighSlide fully.
Your out-of-the-box approach is fine but it should be able to handle HighSlide-recommended configurations.
By the time <script async src="index_htm_files/highslide.js"></script> resolves, the Egg code hs.align = "center"; has been reached in FAILs.
I expect no better from you in using a product that is somewhat stale, Version 4.1.13 (2011-10-06)!
HighSlide website is current dead in the water as its MySql connection is down.

Your third party core products are not being updated at all, c.f., the saga over jQuery.

@Egg, you need to include the following into your website head: <script src="index_htm_files/highslide.js"></script>; the async call has been removed.

Acorn

[Egg Bramhill]

Hi Acorn/Gary. Unfortunately whilst your code works fine it creates more issues than it solves. The code does indeed remove the horizontal scroll bar in FF but it ends up creating issues with the displayed page length. The worst issue is that this code completely blocks the pages scrolling on a mobile. It works fine on preview but not in real use on a mobile. You can view the problem here:

https://parkeston.com/hc7/

At least this is the issue on my iphone.

Because of this after much experimenting I've decided to remove the code as the error is only occuring on FF, not other browsers.

You can view the site (under construction) here without any code. I also removed any highslide. Link below:

https://parkeston.com/hc11/

Thank you so much for your valuable input, I'll try further reasearching the FF bug for this site.

[Egg Bramhill]

One further issue I'm having with this site is the PageSpeed Insights giving a very poor score for the desktop thus:

[Acorn]

One further issue I'm having with this site is the PageSpeed Insights giving a very poor score for the desktop thus:

Egg, can't help much here. /hc7 ( with contain: paint; ) has a CLS of 0.011 for Desktop, 0.015 for Mobile. CLS for /hc11 is 0.56/0.02.

The worst offender is this HTML SPAN tag:

div#xr_bph > div.xr_ar > div.xr_pbd > span.xr_wpp
<span class="xr_wpp xr_ar" style="left:-806px;top:-254px;width:3036px;height:2630px; background:url('index_html_files/338.webp') 1368px 1165px repeat;"></span>

Try removing this background; the contain: paint; does this so the CLS is minimal in /hc7.

I think the lesson with a STFW design is to avoid a Pasteboard fill.
Unless it is a CSS or SVG repeat fill and you can apply a cover, I might instead use a gradient fill.


The CSS code for overflow-x ought to work well across all browsers, including FF.
I would use that as your fall back.

Acorn

[Egg Bramhill]

Thanks for the input Acorn. I decided that in some way the whole xar file was creating too many issues so I totally rebuilt it anew. Often far better than chasing down Xara's sometimes buggy output.

Works fine now even in FF with no horizonal bars or shifting. The PageSpeed Insights are now sorted and everythings in the green.

Not finished but bug free now

https://parkeston.com/hc20/

EDIT I don't understand why the pasteboard background should be such an issue. The pasteboard is just repeat filled with the bitmap below ???

[Boy]

That's a very nice site, Egg! Creative, clear, informative and fun.

[Acorn]

Thanks for the input Acorn. I decided that in some way the whole xar file was creating too many issues so I totally rebuilt it anew. Often far better than chasing down Xara's sometimes buggy output.
Works fine now even in FF with no horizonal bars or shifting. The PageSpeed Insights are now sorted and everythings in the green.
Not finished but bug free now
https://parkeston.com/hc20/
EDIT I don't understand why the pasteboard background should be such an issue. The pasteboard is just repeat filled with the bitmap below ???

Egg, in /hc7, the Pasteboard was a direct image on the page. In /hc20, it has been, properly, subsumed into the xr_main.css code as:

.xr_bgb0 {background:url('1928.webp') 600px 704px repeat;}
.xr_bgc0 {background:url('1928.png') 600px 704px repeat;} for all pages, up to .xr_bgb12 (even numbers) for pages (index.html, transport.html, 1912.html, enterprise-centre.html, community-trust.html, noahs.html, contact.html).

I don't know what you did but keep doing it!

Acorn

In passing, the contact: paint; code needed to accommodate Variants so something along the lines of:
<style>
.xr_xr, [class*='.xr_mvp_'] {
contain: paint;
}
</style>
No tested for transition or presentation sites.

Acorn