iPhone 13 Report: Unexpected Behavior

[Mike-E]

Hi Team Fusion,

I have a report of an iPhone 13 user that has attempted to use the tabs found here:

https://alpha.starbeam.one/

When attempting to horizontal scroll on one of the products here, it appears to scroll the tab control instead, moving to the next section.

This does not occur in any of the browsers I have tried.  Any suggestions here to address this would be greatly appreciated.

[Vijay Ravi]

Hi Mike,

Prevent Tab content swipe action: https://blazor.syncfusion.com/documentation/tabs/how-to/prevent-content-swipe-selection

You are facing this behavior due to the Tab touch swipe feature. You can prevent this behavior by setting up args.cancel = true in the Selecting event of the Tab as shown in the below code snippet. Refer to the shared UG for more details.

[Index.razor]

<SfTab>

    <TabEvents Selecting="Select">

    </SfTab>

 

@code {

    public void Select(SelectingEventArgs args)

    {

        if (args.IsSwiped)

        {

            args.Cancel = true;

        }

    }

}

Regards,

Vijay Ravi

[Mike-E]

Thank you for your reply, Vijay.  Why does this occur in iPhone and not on Chrome when I am swiping there?  It would seem this would be triggered in both scenarios.

[Vijay Ravi]

Hi Mike,

When performing the scroll action touch move event is fired in only iOS devices other devices like android, and desktop does not fire the touch move event, So your reported behavior only occurred in iOS devices. You can avoid this behavior with help of our last shared solution.

Regards,

Vijay Ravi

[Mike-E]

Verified as fixed.  Thank you very much for your quick reply and assistance, Vijay & team!

[Ravikumar Venkatesan]

Mike,

You are welcome. Let us know if you need any other assistance.