Problem with CSS mask layer on Android phone_html/css_WEB-ITnose

My general frame

is a main DIV, width and height 100%, position fixed, z-index: very big
and then a displayed div, vertically centered and position fixed.

But this works. It is normal to see it in the PC browser. The masked elements cannot be clicked or scrolled...

But it is placed on the mobile phone. , although the masked element cannot be clicked, why can it still be scrolled? This means that when the page is too long, it can still be slid down. But I see that easyui’s dialog box cannot slide
How to deal with this

 loadingshow: function (msg) {        if (!msg) {            msg = "加载中...";        }        var jContext = $('body');        var jLoad = $("#appLoading");            var msgDIV = new Array();            msgDIV.push('<div id="appLoading" style="position:fixed;width:100%;height:100%; font-size:18px;background:rgba(0,0,0,0.5);top:0;left:0;z-index:555555">');            msgDIV.push("<div id='lContext'><img  src='/App_Themes/Default/images/ajax-loader.gif'   style="max-width:90%" / alt="Problem with CSS mask layer on Android phone_html/css_WEB-ITnose" ><span id='sInfo' style='margin-left:8px;display:inline-block'>" + msg + "</span>");            msgDIV.push('</div></div>');            jLoad = $(msgDIV.join('')).appendTo(jContext);            var left = jContext.width() / 2 - jLoad.find('#sInfo').width() / 2 - 20;            var top = jContext.height() / 2 - jLoad.find('#sInfo').height() / 2;            jLoad.find("#lContext").css({ position: 'fixed', top: top, left: left, color: 'white', padding: '10px', margin: '10px'});        $("#appLoading").show();//有问题请删除    },

Reply to discussion (solution)

Please use percentage for mask layer pixels

Please use percentage for mask layer pixels

What I have above is percentage

When popping up the mask layer , limit the height of the subject so that no scroll bar will appear. If there is no transparency effect, you can even hide the subject

Cancel the touchmove event