I don’t see this behaviour in Safari at the various sizes I tried it. I see you are using some kind of iPad Air 2 screen simulator and I wonder if that is causing the issue?
Thanks Gary. I’m just using the Firefox developer tools (responsive mode). I see it in RW Preview too, when I look at iPad landscape. I just checked on safari and their responsive design mode. I can get see the behaviour if I look at the iPad view (9.7" landscape, for example).
Can you double check that setup, just so I know I’m not going crazy…
Just double checked it in Safari Dev responsive mode iPad 9.7" landscape and it is perfect.
It’s weird that you can see the bottom scroll bar flash up in your video as if the screen is being resized.
Try removing all animation and sliders as a test.
Weird. Thanks for checking. I have to get cracking on some housework/parenting but I’ll try a reboot and then check sliders/animation this evening.
I do not see it on an iPad Air 2 (iOS 10.3.2), however I do see the issue in Safari (10.1.2) on OS X (10.11.6).
I opened your site in a new window with it sized to within the iPad break. When the page loads, it does not scroll left/right. However, once I scrolled down the page, I could get the horizontal scroll bar to appear.
Are you using the Grid stack for the layout? I think it has something to do with how that’s coded. If you look at the outer grid containing element, it has -15px margin and 15px padding. I think some versions of Safari don’t like the negative margin.
Btw, are you disabling right-click on the site? It makes it harder to inspect an element to see what’s going on. You may want to disable for testing/troubleshooting.
1 Like
Post up a download link to a ZIP file containing your project file and I will take a quick look at it before bed. That being said, I will be away from the computer for a week so tonight is the last chance I’ll have to look at it though.
1 Like
Also, I agree with the above. Disabling right-click really doesn’t do much of anything for you.
Thank you both.
@DLH is this right-click a Foundry setting? I did not disable it on purpose (and don’t see it in the Control Center) but I’ll dig through my setup… Same with the negative padding/margin. It might be a layover from the original project file (which had a negative margin with the Overlap stack)? I’ll have a closer look around the grid stack and where the overlap stack was.
@elixirgraphics I’ll send you a download link via PM, Adam. Thanks for having a look. It isn’t critical or anything, but if you have a spare moment, that’d be great
@jabostick: I don’t think there is a Foundry setting for disabling right-click, and I don’t know what you did to disable it. I just noticed it when trying to inspect the grid area and found I could not right-click.
@elixirgraphics: I have also seen this horizontal scrollbar issue in one of my projects where I used the Grid stack.
I took a look at it real quick just now. The problem area is a Container stack where you’re assigning it padding using the built-in default Stacks controls for Padding. I don’t have time to take an in-depth look at it right now. But you should remove the padding you’re adding, here:
I suspect it has something to do with the way the Bootstrap rows work. But I don’t have the opportunity to dive into it deeper. The best thing to do really though is to use the Margins stack within the Container stack and setup responsive based padding / margins so each breakpoint gets its own spacing.
Foundry does not have that “feature” included in it anywhere.
Not the Grid stack in this case. If you’re having troubles, submit your project file to me and point out the problem area and I can look at it when I am back from my time off.
Strange, that padding adjustment doesn’t seem to do it (though your point is noted)…
The Chef project is working fine and many of the settings are duplicates of that. I’m not entirely sure when the issue crept in so I might start fresh and add a section at a time. I think the only major changes yesterday were adding a few new images in the ‘online booking’ section/slider but they should all be the same dimensions as the previous ones.
@jabostick After Adam’s reply, I went back to the project where I saw a similar issue. It took a bit of time deleting stacks until the problem went away. I was finally able to track it down to an interaction with the Grid stack and the Reveal stack.
It looks like you’re also using the Reveal inside of the Grid, so that may be what’s going on. Try moving the Grid contents out of the Reveal stacks and then delete the Reveal stacks from the page. That should leave you with the Grid and the current cell contents, but without the Reveal animations. It shouldn’t take you too long to strip them off the page. (Work on a copy of your project, just in case you accidentally save after deleting.) In my case, the issue went away when the Reveal stacks were removed. As soon as I put a Reveal back in a Grid cell, the horizontal scrolling came back.
Obviously, that isn’t going to work for your final solution, but it may allow you to confirm if you are seeing the same issue.
1 Like
Awesome! Thanks for having a look. I’ll give it a go this evening after work. I believe the Grid is something I added to egomade’s project, so it would make sense that I see it on mine and not his.
Looks like the right click disable is set in slick slider:
indent preformatted text by 4 spaces
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
2 Likes
Oh, wow good sleuthing! So that’d be coming from a gallery that I have inside the modals, I think.
Yeah, some galleries do this as a “feature” to make a marketing claim to stop images being downloaded.
Just a bit of follow-up on the side-scrolling issue. I tried a couple of suggestions as pointed out above (removing Reveal, playing with padding) and none seemed to work. I even went back to the original Chef project that doesn’t have this issue and went, stack by stack, to see what the settings were.
I was fully prepared to just ignore it (it’s not that big of a deal, after all, I just couldn’t unsee it once I saw it) and I thought I would try unchecking the ‘Allow Overflow’ option on all the container stacks. This seems to have done the trick!
While this makes some intuitive sense, it’s still a bit of a mystery to me because Chef has ‘Allow Overflow’ checked on his project file… I do have some extra bits in mine (a Grid as well as a slider of quotes moved over from another egomade file) so it’s not quite apples to apples.
So - @elixirgraphics - between @DLH’s Grid/Reveal combo and my ‘Overflow’ experiments - I don’t know if that makes any sense (whether it is a bug, a weird specific interaction, or just some troubleshooting to try if someone else sees the same behaviour).
Edit: As a bonus, @DLH - I just tried putting my Grid back into the Reveal and it seems to be working. So, if having that razzle dazzle on your site is important, the Overflow setting might do it?
I spent some more time on this too. I think that while our issues have the same result, they may not be caused by the same thing.
I put together a test RW project using only a few Foundry stacks (Nav bar, Margins, Header, Paragraph, Grid and Reveal). I used the stacks with their default settings, with the exception of increasing the delay and the duration of the animation, to make it easier to see that the animation was on the page. There are three pages in the project: Grid+Reveal, Grid Only, and a Grid+Reveal #2 (with custom CSS). The pages are identical, except the Reveals are only on two of the pages, and with one of the Reveal pages having custom CSS. I tried to keep the example as simple as possible.
Only the home page (Grid+Reveal) has the horizontal scrolling issue. The Grid+Reveal #2 has CSS that removes the negative margin and the corresponding positive padding for the main grid container. Doing that eliminates the horizontal scroll.
@jabostick, I did not use any containers in this project and none of the other stacks appear to have the allow overflow option, which is why our issues may be slightly different. You are right that once you notice the issue it always bothers you. Is your whole grid in one Reveal? In my page, I have Reveals inside each grid cell.
Here’s a Dropbox link to the test project: Dropbox - Grid+Reveal-Test.zip - Simplify your life
1 Like
Ah, yeah my reveal covers the entire grid, not each cell so that may be a key difference.
jabostick noticed a similar thing on my Project13 where the home page at http://webdeersign.com/pr13demo2/ does not show the issue but I can now see the issue on an iPad (portrait) when trying to swipe left or right on the About Us page at http://webdeersign.com/pr13demo2/about/ . These 2 pages are almost identical in layout except for 1 thing. I have the top Header set to Flexible 94% width on the Home page which does not show the issue. So I think the issue may be due to the browser needing to recalculate the width of the page which restores the page positioning.
FYI I don’t use and Reveals and as both have the same Shift animation, it can’t be that animation causing the issue.
1 Like