Search code examples
jquery-mobilevisual-studio-lightswitch

How to fix LightSwitch HTML application becoming unscrollable (more frequent on mobile)


This one is a nightmare to debug since it almost always happens only on a native android device, where it is impossible to inspect the DOM (or is there a way?).

Essentially, once this bug is triggered, no more scrolling is possible in the app until a full refresh is done.

Note: LightSwitch does not support jq-mobile newer than 1.3.2


Solution

  • This issue happens quite more rarely on desktop. But since it finally did, I was able to dig thru the DOM to see what was happening. Once I knew where the issue was, it didn't take long to find a documented bug in jq-mobile-1.3.2 that LightSwitch uses: https://github.com/jquery/jquery-mobile/issues/6515

    Root cause: sometimes when LightSwitch refreshes the data, the screen get's stuck in a transitioning mode (jq mobile feature), and transitioning CSS class has a overflow:hidden property set.

    The link above describes how to modify jquery-mobile to make transition state more robust, but for the purposes of LightSwitch, just add the following CSS into user-customization.css

    .ui-mobile-viewport-transitioning, .ui-mobile-viewport-transitioning .ui-page {
        overflow: auto !important;
    }