[iOS] Sidebar touch event breaks layout

[JoaoFOliveira]

Bug Report

Hi,

I've been making an app and noticed, only on iOS apparently (Safari works), the sidebar on my project when I touch/drag it back brings the pusher div over and breaks the layout.

I went over and noticed it also happens on the official website, so it's not any personal coding interference.

Steps to reproduce

1. Go to fomantic-ui.com on iOS Safari
2. Open sidebar on the hamburger menu
3. Drag laterally on the sidebar

Expected result

Expect it to bring back the pushed div over to where the sidebar is, default behaviour elsewhere.

Actual result

GIF:

Latest version of fomantic-ui or semantic-ui

[lubber-de]

Seems to be happening since Safari 13.1 on iOS only, which seems to allow drag-resizing of single website components, which in turn is not intended for the sidebar. 😞 Until Safari 12 everything works ok as in all other browsers.

[JoaoFOliveira]

Nice analysis, do you think there is a fix for this?

[lubber-de]

There is a workaround: preventing the default behavior on touch prevents this behavior in ios 13.1+ However, this also prevents scrolling the sidebars content if there are too many items

$('.sidebar').on("touchmove",function(event){
  event.preventDefault();
});

See https://jsfiddle.net/lubber/7d2hxouf/31/

I tagged this for help-wanted

[lubber-de]

i think i found a proper css only solution 🙂 :

.ui.sidebar {
	touch-action: pan-y;
}

I am just not quite sure if this should be the default as it would prevent other possibly wanted touch gestures See https://fomantic-ui.com/jsfiddle/#!lubber/7d2hxouf/41/

[lubber-de]

Might be fixed by https://github.com/fomantic/Fomantic-UI/pull/2451 but i am not sure if we should really merge it

[JoaoFOliveira]

That fix sorts out the draggable on the sidebar element, but it still doesn't "slide back" the pushed content, it hovers it. Because of that, still don't know if it's fixable or to close the issue. But thanks!