Printable View
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.
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
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.
@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
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.
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.Quote:
Originally Posted by Egg Bramhill
The worst offender is this HTML SPAN tag:
Try removing this background; the contain: paint; does this so the CLS is minimal in /hc7.Code: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>
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
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 :D
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 ???
That's a very nice site, Egg! Creative, clear, informative and fun.
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:Quote:
Originally Posted by Egg Bramhill
.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
@Egg, I took the liberty of playing with your navigation: Attachment 133717
Acorn :)
Thanks Boy.
Cheers Acorn
Neither do I. Somewhere along the line this xar file became corrupted.Quote:
I don't know what you did but keep doing it!
I can confirm this does indeed work. I've included it in the site (link below). I see no page length issues and the mobile version works fine. All green in PageSpeed Insights.Quote:
In passing, the contact: paint; code needed to accommodate Variants ....
https://parkeston.com/hc20a/
Acorn, no liberty. I like this effect even more than my current navbar.Quote:
@Egg, I took the liberty of playing with your navigation:
One thing I can't figure out is the mouseOver buttons are triggered by links on the mouseOff layer:How do I add links to the different pages?Quote:
javascript: ;
Here are two variations of your original:
https://www.parkeston.com/tg/bus-2/
https://www.parkeston.com/tg/bus-3/
What I like about not using the Xara navbar is the fact that there are only 2 images used for all 2 x 7 (14) button states as can be seen in the bus-2 version and they can be named. I've also made the navbar sticky.
One final question is it possible in any way to stop the page flashing as it loads the next page. Perhaps an overlay that is only visible until the page is fully loaded?
Egg
I apologise for moving everything onto the MouseOff layer (except !selected), but it made more sense to me that way...horses for courses and all that.
Changed the Transition Effect in Export to Scroll Horizontal to smooth out the flicking pages.
Changed the Page Background to Pasteboard Background to eliminate a white border that appeared when changing pages.
Gave the arrows and titles a Fade In Reveal Animation, again to stop a flicking effect.
Removed some hidden rectangles as I couldn't see what they did.
Removed the vans on MouseOver to keep it clean.
Left the Layer !selected and the Website HTML Code (Head) as I presume you did that to reduce the number of images.
I have a horrible feeling I've missed the mark and gone off on a tangent, but have fun with the file anyway.
Attachment 133721
@Egg, just change the MOff Link javascript: ; for your required page.
The demo needed a dummy link and as there were no other pages i used this. People often use '#' (wrongly).
I have found this CSS works well for flashing and scaling issues:
<style>
html, body {
animation: fadein 16ms;
}
@keyframes fadein {
0%, 65% { opacity: 0; }
100% { opacity: 1; }
}
</style>
Detail here, https://www.talkgraphics.com/showthr...608#post654608.
Acorn
@ Acorn: Spot on, that solves the flashing issue. Talk about missing the bleeding obvious re the links! Why isn't # correct?
@ Chris:Indeed. Using these additional layers is my prefered way of working.Quote:
...horses for courses and all that.
Yes you are missing something but I'm off out & will explain later. Thanks for your input.Quote:
I have a horrible feeling I've missed the mark and gone off on a tangent, but have fun with the file anyway.
Latest version
Egg, a '#' will move the view to the top of the page. When I am testing, i might not want that. A '#' also invokes Xara code, which may muddy my testing.Quote:
Originally Posted by Egg Bramhill
Acorn
Thanks Acorn :D
@ Chris:
Here's what I think you were missing ;)
https://youtu.be/RzYHcT2MlDY
Yep, that makes sense. I removed the drop-down buses early on in my playing, as my brain went 'simply everything'. So, in effect, the first thing I did was remove the very thing you wanted. I'm consistent :D