jQuery Mobile and iPhoneX

jQuery Mobile and iPhoneX

Hi,

  Has anyone tried using jQuery Mobile (inside a hybrid application) on iPhoneX? I'm trying to use the safe areas and set headers, content and body styling but it does not seem to be working. I'm using following styles following this link: Safe area constants:

  1. .ui-page .ui-header {

        /* Status bar height on iOS 10 */

        padding-top: 20px;

     

        /* Status bar height on iOS 11.0 */

        padding-top: constant(safe-area-inset-top);

     

        /* Status bar height on iOS 11+ */

        padding-top: env(safe-area-inset-top);

     

        padding-right: constant(safe-area-inset-right);

        padding-left: constant(safe-area-inset-left);

     

    }


  2. .ui-content {

        padding-left: constant(safe-area-inset-left);

        padding-right: constant(safe-area-inset-right);

    }

  3. .ui-page .ui-footer {

       padding-left: constant(safe-area-inset-left);

            padding-right: constant(safe-area-inset-right);

            padding-bottom: constant(safe-area-inset-bottom);

     

    }

Not sure what I'm missing. Anybody else got it working that way? 

Thanks in advance and regards