New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Cannot scroll Telerik control in iOS 11.3 - the page scrolls instead

Problem

Scrolling Telerik controls result in page scroll since iOS 11.3.x update.

Description

In a long page when you scroll a Telerik control which has a scrolling container (for example ComboBox, DropDownList or Grid with enabled scrolling) the page itself is scrolled along the control's scrolling container.

Solution

Disable the default scrolling by canceling the touchmove event to resolve the issue.

*** Update from 29 May 2018 ***

The General workaround causes some issues in some scenarios, so we can suggest adding the specific classes for each affected control in the jQuery selector:

 function fixGridSchedulerComboBoxDropDownList() {
    // For RadGrid - .RadGrid .RadTouchExtender
    // For RadScheduler - .rsContentScrollArea.RadTouchExtender
    // For RadComboBox - .rcbScroll
    // For RadDropDownList - .rddlList
    var fixed = $telerik.$(".RadGrid .RadTouchExtender, .rsContentScrollArea.RadTouchExtender, .rcbScroll, .rddlList");
    fixed.on('touchmove', function (e) {
        e.preventDefault();
    });
}
Sys.Application.add_load(fixGridSchedulerComboBoxDropDownList);
*** End of Update from 29 May 2018 ***

*** Update from 23 May 2018 ***

function fixTelerikControlsScrollingInIOS() {
    var fixed = $telerik.$("[class^='Rad'], .rddlSlide");
    fixed.on('touchmove', function (e) {
        // if the control does not have scrollbars, it should not prevent page scroll
        if ($telerik.$(e.currentTarget).find(".RadTouchExtender").length > 0) {
            e.preventDefault();
        }
    });
}
Sys.Application.add_load(fixTelerikControlsScrollingInIOS);
*** End of Update from 23 May 2018 ***

*** Initial solution ***

The following code prevents the touchmove event for all Telerik controls on page load.

function fixTelerikControlsScrollingInIOS() {
    var fixed = $telerik.$("[class^='Rad']");
    fixed.on('touchmove', function (e) {
        e.preventDefault();
    });
}
Sys.Application.add_load(fixTelerikControlsScrollingInIOS);
*** End of Initial solution ***

Also, in case the RadGrid has scrolling enabled in combination with Static Header, scrolling of the grid data would not be possible by touching the Template content.

This issue has been recorded in our Feedback Portal at: Scrolling on a mobile (touch) device is impossible with the Lightweight RenderMode when an HTML element takes up the entire grid row

The following CSS style can be used as a workaround. Please note that this may not work in combination with the workaround suggested above.

div.rgDataDiv {
    overflow: auto !important;
}

Notes

This scenario is still under investigation and this article will be updated when new information is available.

See Also

In this article
Not finding the help you need? Improve this article