It’s odd but for some reason, only in safari 13.1 on High Sierra, this page judders on scroll. Firefox and Chrome are fine, safari on iPadOS is fine.
https://betasite.slipwayautos.co.uk/
Can anyone suggest why/any fixes?
It’s a Source based site, with a few other 3rd party stacks (BWD, 1LD, Joe Workman). I’ve tried removing the recently added 3rd party stacks, deleted everything and republished a few times but no luck so far. I’m sure it was fine up until recently.
I can’t help with your question, but can say that on Chrome on Android the page isn’t scaling correctly for mobile.
Pop ups in the footer are messed up too.
It might be just that it’s a dev site, but on my android device things don’t feel right at all. Maybe youve got some conflicting JS?
I see it too on HS in Safari.
I would start removing the 1Ld nav first, preview in Safari and then keep removing stuff (animation first) until the issue is resolved.
Thanks @steveb.
Will look into the font sizing. It uses JW’s auto fit to scale down the last part of the title but looks like I need to check the settings for minimum font size. The containers look like they need a bit of work too!
Yes the pop drop stacks attached to the buttons don’t seem to be working as well as hoped on auto setting for mobile.
Thanks, good to know it’s not just me!
I tried removing the 1LD nav (it was a recent addition) but still had the same issue.
It’s odd that it previews fine, background stays fixed, but on safari it has an issue.
Will pull it apart further later and try removing stacks again.
I’m not familiar with the JW stack you mention, but can say pop drop is very intelligent in terms of where the popup appears, so my guess is something is pushing the width of the page beyond that of the screen, so pop drops is assuming this extra width is visible, which it isn’t.
What I mean is, some is overflowing the screen width and causing PD to exhibit this issue. The issue isn’t PD itself.
EDIT… Is the stack Fit Text? I’m not too sure what if does, but maybe pull it and just adjust the font size using some CSS, its pretty simple to do.
Its very possible though that this stack like PD is being “broken” by something else on the page, opposed to being the thing breaking the page.
Only on my phone but try this fix for the overflowing scaled text:
(Am only assuming you may have set up a flex container)
This is the full height fixed background attachment - this happens a lot in safari. Change the background to scroll instead of fixed and the stutter goes away.
The best way to do this if you really want a fixed background is to either put it on the body element or to use a position:fixed div that is placed beind the other content via z-index (i.e. without the other content inside it)
Thank you very much for the explanation @tav, and a solution.
@habitualshaker I see the old thread on background images in Source was back the other day. Did you ever get a chance to look into it further or was there not the demand/need?
@pmjd - there’s been no more requests for it. Rather than incorporating anything into Source I might just look to put a short tutorial together on the Knowledge Base about how to do it (like Tav says) with some custom CSS.
So would I need to use the coder stack to achieve this rather than the container stack?
Depends on the approach. It would either just need some CSS or yes - you could use a Coder to create the div that would get fixed behind things. I’ll try and pull something together this weekend if i get a chance.
How are you looking for it it to behave on mobile?
You can do it easily with a Section and the advanced positioning child in the short term until you replace it with code.
Thanks @habitualshaker, originally had planned to show a different (smaller portrait sized image) image on mobile, the sizing was never quite right for the image on mobile if I tried to use the same image as desktop.
@tav thank you will try and get that setup in the meantime
Just put the section on the page (not inside something else) add an advanced position child set to position fixed, 100% browser height and width and adjust the custom z-index if necessary.
