Looking for feedback

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