# Why is Page "Draggable" on iOS Devices?

**URL:** <https://forums.realmacsoftware.com/t/why-is-page-draggable-on-ios-devices/27407>\
**Category:** RapidWeaver Classic\
**Created:** [June 19, 2019, 1:16pm UTC](https://forums.realmacsoftware.com/t/why-is-page-draggable-on-ios-devices/27407 "2019-06-19T13:16:50Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![YankeeLaker](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/yankeelaker/32/16347_2.png) [@YankeeLaker](https://forums.realmacsoftware.com/u/YankeeLaker)\
**Post date:** [June 19, 2019, 1:16pm UTC](https://forums.realmacsoftware.com/t/why-is-page-draggable-on-ios-devices/27407/1 "2019-06-19T13:16:50Z")

</div>

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/](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

---

<div class="post-metadata">

**Author:** ![YankeeLaker](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/yankeelaker/32/16347_2.png) [@YankeeLaker](https://forums.realmacsoftware.com/u/YankeeLaker)\
**Post date:** [June 19, 2019, 11:03pm UTC](https://forums.realmacsoftware.com/t/why-is-page-draggable-on-ios-devices/27407/2 "2019-06-19T23:03:31Z")

</div>

@joeworkman @tav @anon75570550 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.

---

<div class="post-metadata">

**Author:** ![joeworkman](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/joeworkman/32/23780_2.png) [@joeworkman](https://forums.realmacsoftware.com/u/joeworkman)\
**Post date:** [June 19, 2019, 11:16pm UTC](https://forums.realmacsoftware.com/t/why-is-page-draggable-on-ios-devices/27407/3 "2019-06-19T23:16:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![YankeeLaker](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/yankeelaker/32/16347_2.png) [@YankeeLaker](https://forums.realmacsoftware.com/u/YankeeLaker)\
**Post date:** [June 20, 2019, 12:43am UTC](https://forums.realmacsoftware.com/t/why-is-page-draggable-on-ios-devices/27407/4 "2019-06-20T00:43:48Z")

</div>

Thank you Joe. I uploaded a YouTube video ([https://youtu.be/oPucelac3i8](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…

---

<div class="post-metadata">

**Author:** ![LSPhoto](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/lsphoto/32/270_2.png) [@LSPhoto](https://forums.realmacsoftware.com/u/LSPhoto)\
**Post date:** [June 20, 2019, 1:46am UTC](https://forums.realmacsoftware.com/t/why-is-page-draggable-on-ios-devices/27407/5 "2019-06-20T01:46:48Z")

</div>

Like this?  
[https://www.sandlerpartners.com/](https://www.sandlerpartners.com/)

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

---

<div class="post-metadata">

**Author:** ![anon75570550](https://avatars.discourse-cdn.com/v4/letter/a/7c8e57/32.png) [@anon75570550](https://forums.realmacsoftware.com/u/anon75570550)\
**Post date:** [June 20, 2019, 4:49am UTC](https://forums.realmacsoftware.com/t/why-is-page-draggable-on-ios-devices/27407/6 "2019-06-20T04:49:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tav](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/tav/32/5458_2.png) [@tav](https://forums.realmacsoftware.com/u/tav)\
**Post date:** [June 20, 2019, 8:31am UTC](https://forums.realmacsoftware.com/t/why-is-page-draggable-on-ios-devices/27407/7 "2019-06-20T08:31:59Z")

</div>

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.

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

```

![18](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/2X/f/f92bbd612fb42f12c72d0786cb82bf134646a62a.png)

 ![21](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/2X/c/c74d24af93b4350826b9c9137989e3af1736bcf7.png)

---

<div class="post-metadata">

**Author:** ![YankeeLaker](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/yankeelaker/32/16347_2.png) [@YankeeLaker](https://forums.realmacsoftware.com/u/YankeeLaker)\
**Post date:** [June 20, 2019, 1:07pm UTC](https://forums.realmacsoftware.com/t/why-is-page-draggable-on-ios-devices/27407/8 "2019-06-20T13:07:17Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![YankeeLaker](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/yankeelaker/32/16347_2.png) [@YankeeLaker](https://forums.realmacsoftware.com/u/YankeeLaker)\
**Post date:** [June 20, 2019, 1:10pm UTC](https://forums.realmacsoftware.com/t/why-is-page-draggable-on-ios-devices/27407/9 "2019-06-20T13:10:20Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![tav](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/tav/32/5458_2.png) [@tav](https://forums.realmacsoftware.com/u/tav)\
**Post date:** [June 20, 2019, 7:38pm UTC](https://forums.realmacsoftware.com/t/why-is-page-draggable-on-ios-devices/27407/10 "2019-06-20T19:38:20Z")

</div>

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

```auto
.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.

---

<div class="post-metadata">

**Author:** ![YankeeLaker](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/yankeelaker/32/16347_2.png) [@YankeeLaker](https://forums.realmacsoftware.com/u/YankeeLaker)\
**Post date:** [June 20, 2019, 9:05pm UTC](https://forums.realmacsoftware.com/t/why-is-page-draggable-on-ios-devices/27407/11 "2019-06-20T21:05:42Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![tav](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/tav/32/5458_2.png) [@tav](https://forums.realmacsoftware.com/u/tav)\
**Post date:** [June 20, 2019, 10:19pm UTC](https://forums.realmacsoftware.com/t/why-is-page-draggable-on-ios-devices/27407/12 "2019-06-20T22:19:43Z")

</div>

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](https://demo.bigwhiteduck.com/blueprint/sidebar/) file does not do this, nor does the [scrollmate demo](https://demo.bigwhiteduck.com/scrollmate2/) which has complex content or even [this site](https://elate.global) 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.

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/system/32/25301_2.png) [@system](https://forums.realmacsoftware.com/u/system)\
**Post date:** [July 21, 2019, 8:19am UTC](https://forums.realmacsoftware.com/t/why-is-page-draggable-on-ios-devices/27407/13 "2019-07-21T08:19:49Z")

</div>

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