There have been several recent reports regarding the over-scrolling behaviors on iOS Safari when using touch to scroll controls that are scrollable.  The general effect is that you see the rubber-banding of the entire browser viewport when hitting the top or bottom of the scrollable contents of the control.

After spending a couple of days looking into this and trying all manner of kludgy workarounds, I cannot find anything that will reliably work and still coexist nicely with all other types of functionality such as browser viewport dimension/orientation changes, etc.

There *is* a standard CSS property for this (overscroll-behavior) out in the wild now, but iOS Safari does not support it yet.  I've added it to the EWB UI layer so that when it does become available, it will immediately start working.  So, at this point, all we can do is wait...

More info:

https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

Tim Young
Elevate Software
www.elevatesoft.com

Hi Tim,

1 Will this change to the EWB UI layer be part of the next build? And when is that expected.

2. Does iOS Chrome support this CSS property?

// Thom

On 6/13/2018 4:03 PM, thomh wrote:

> 2. Does iOS Chrome support this CSS property?

According to the link Tim posted Chrome 63 supports this on desktop and
mobile but their mobile appears to refer to Android and Android webview.

Chrome for iOS is at v67 so in theory should support this

Raul

Thom,

<< 1 Will this change to the EWB UI layer be part of the next build? And when is that expected. >>

Yes, and that will probably be coming in a week or so.  This is the only outstanding issue at the moment, so I'm not rushing it.

<< 2. Does iOS Chrome support this CSS property? >>

Please see Raul's answer.

Tim Young
Elevate Software
www.elevatesoft.com

<<Chrome for iOS is at v67 so in theory should support this>>

I've just tried on my iPad with Chrome 67 and getting the same results as Safari, but understand that Chrome is using the Apple rendering engine.

Sample drawings using the EWB Paint demo
https://www.elevatesoft.com/forums?action=attach&category=ewb&id=ewb_general&msg=14718&attach=1

Does any one know of any work around to this, or do we just have to wait for Apple to introduce the CSS property?

I've looked at a couple online signature services and they seems to be able to disable all scrolling of the page when drawing in the signature caputre box on iOS but touching the webpage outside of the signature box scrolls the web page, but you get a smooth signature, any ideas?

Anthony wrote:

> wait for Apple

If there is a sample I can try somewhere, I will see what iOS12 does with it.

--

Matthew Jones

"Matthew Jones" wrote:

<<If there is a sample I can try somewhere, I will see what iOS12 does with it.>>

An example of external website which would on iOS11
http://onlinesignature.com/draw-a-signature-online

The EWB paint demo doesn't
http://www.elevatesoft.com:8081/paint/paint.html

<Anthony> wrote:
> "Matthew Jones" wrote:
>
> <<If there is a sample I can try somewhere, I will see what iOS12 does with it.>>
>
> An example of external website which would on iOS11
> http://onlinesignature.com/draw-a-signature-online
>
> The EWB paint demo doesn't
> http://www.elevatesoft.com:8081/paint/paint.html
>
>

What an interesting effect! Not fixed in current iOS beta.

--
Matthew Jones

Anthony,

<< An example of external website which would on iOS11
http://onlinesignature.com/draw-a-signature-online  >>

I think this site is using an overlay element (100% x 100%, fixed positioning) to prevent the touches from reaching the body and causing the default behavior.

Apple needs to fix this - this type of workaround is ridiculous and contrary to any sort of decent software development practice.

Tim Young
Elevate Software
www.elevatesoft.com

> Apple needs to fix this - this type of workaround is ridiculous and
> contrary to any sort of decent software development practice.

Any Apple developers here? If not I can file a RADAR if I am given full
details with examples.

--
Matthew Jones