Why is Page "Draggable" on iOS Devices?

I am new at web site creation, and am thinking this may be just a single setting somewhere that I have set incorrectly, since I don’t really know what I am doing yet. My site has only one page so far, and it is still under construction: https://www.yankeelaker.com/ylpa-sandbox/

When I view this published page on iPhone, if you touch and hold, you can drag around the whole page. I have nothing set to float, only fixed or flexible. I get the same behavior in portrait mode on my original iPad Air, but landscape mode does not exhibit this behavior. The portrait vs landscape on the iPad does reflect the switch from full menu bar.

I doubt this is stack-specific, but I am using Foundation, Top Bar is set to make that switch at below-desktop. Also heavy use of Big White Duck’s SideBar and BluePrint ONE stacks. Appreciate any suggestions on how to fix this. Thanks!

Brad

@joeworkman @tav @Marten_Claridge I am using some of your products on this page. I think it is probably not stack-specific, but could use some advice on what to look for.

I can zoom in your page and move it around. This is expected behavior though. I can not do what you are describing.

Thank you Joe. I uploaded a YouTube video (https://youtu.be/oPucelac3i8) showing what I see. The video is from my iPhone 6S, but the same behavior is found in portrait mode only on my iPad Air. A clue that I noted while making the video is that, in the landscape mode on the video, the sidebar does not exhibit the behavior. Only the content area. (I am using BigWhiteDuck SideBar stack for that.) Will drill down on the content stacks and see what I can discover…

Like this?
https://www.sandlerpartners.com/

Never mind. I think yours is different. Don’t think I’ve seen that before.

Hi Brad,

It may be something to do with the fixed background you have on the diagonal background image. See if unchecking the ‘Fixed’ option on the Sections Pro or Blueprint background child makes a difference.

Marten

There is something weird going on with iOS momentum scrolling when there is a fixed background image within the flex sidebar (despite the fixed background being cancelled on touch devices by default).

Here is the fix:

  1. Add a custom class of no-scroll to the BluePrint Sidebar Content Class setting (see screenshot.

  2. Add the following CSS to your site wide CSS code (second screenshot).

This way, the rest of your site will retain momentum scrolling as normal.

.no-scroll{
    -webkit-overflow-scrolling:none!important
}

18

1 Like

Marten: Thanks for taking a look at this. Unchecking the “Fixed” option for both of the diagonal backgrounds did not seem to have an effect.

Andrew: Thank you for looking at this. I did notice other weirdnesses with the rubber-banding. I applied your fix, but cannot see that anything changed. I will create a test page and methodically delete stacks until the culprit is found. The behavior is not exhibited if the content of the page is insufficient to need to be scrolled.

Sorry, my fault, I was in a bit of a rush this morning. The CSS should be

.no-scroll{
    -webkit-overflow-scrolling:initial!important
}

I’ve just tried that live on your site with my iPhone and it stops the anomalous elastic behaviour.

Andrew: That did stop my page from being “draggable.” In your test on your phone, did it scroll smoothly? Seems this killed elastic behavior altogether and makes scrolling not smooth. Did it behave that way for you?

It didn’t when I made the change live but it does do now so that is clearly unacceptable.

I think you should probably try and find the root cause by the process of elimination that you suggested above. There is clearly a stack or combination of stacks/settings within the sidebar that is causing this. Finding this will clearly be a better solution than killing the momentum scrolling.

Obviously the sidebar demo file does not do this, nor does the scrollmate demo which has complex content or even this site that has a fixed background video within the sidebar main content. Your page should thus be easily possible to achieve if we can track down the problem.

We can always pursue this via a support ticket if you need to and can simplify the project down to a couple of problem stacks.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.