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: