Hi,
Looking for feedback from the community. We have a app that has a weather module and a subscription module. They are built in a table format. The weather module has Y and X scroll, however the subscription only has X scroll. When we test the app on an apple device using safari browser these modules moves around in all directions with touch method. The weather module should only move on X or Y scroll however with touch screen movement it moves it all directions, including the titles of the table columns. In regards to the subscription page in only has X scroll, however it has 2 scroll a top one after all the subscriptions are listed and then a bottom on after the total cost of all the subscriptions. The module behaves fine in windows and android devices, however it does not on safari. How do we address this issue? Any suggestion will be greatly appreciated.
AJ
What you describe could be either of two behaviors, and each has its own CSS property.
If a container pans on both axes when you want only one, the property is touch-action. It is defined in section 8.1 of Pointer Events Level 3 (https://www.w3.org/TR/pointerevents3/). Its value grammar is auto | none | [ pan-x || pan-y ] | manipulation and its initial value is auto. The specification says it "determines whether direct manipulation interactions (which are not limited to touch, despite the property's name) MAY trigger the user agent's panning and zooming behavior." So touch-action: pan-x declares that horizontal panning is the only panning a container should trigger.
If instead a gesture inside a module propagates outward and moves the page behind it, that is scroll chaining. The property for it is overscroll-behavior, from CSS Overscroll Behavior Module Level 1 (https://www.w3.org/TR/css-overscroll-1/). With contain, "the user agent must not perform scroll chaining to any ancestors along the scroll chain regardless of whether the scroll originated at this element or one of its descendants."
overscroll-behavior applies to scroll container elements only, and the specification says what happens elsewhere: "An element that is not scroll container must accept but ignore the values of this property." So a declaration on a wrapper that is not itself a scroll container does nothing.
On the difference between browsers, the overscroll specification is explicit that the area is not mandated: "Operating Systems have rules for scrolling such as scroll chaining and overscroll affordances. This specification does not mandate if and how scroll chaining or overscroll affordances be implemented. This specification only allows the content author to disable them if any are implemented." (https://www.w3.org/TR/css-overscroll-1/#scroll-chaining-and-boundary-default-actions) Differing defaults between browsers are therefore permitted by the standard, and an explicit declaration is what behaves the same in all of them.
If you can post the markup and CSS for one module, or say which of the two behaviors occurs, I can be more specific.