About iOS Safari, the bottom of the page pops up the landing mask layer, the problem solved when you exhale the soft keyboard

The former has encountered a problem, is the mobile phone side of the page popup mask + landing on the bottom of the pop-up layer.

In general, fixed positioning is given directly, but a big problem was found during the test.

Under iOS Safari, fixed positioning will run to the bottom of the entire page, not the bottom of the current page.

Check a lot of Baidu however still did not find a useful solution, and then asked a front-end of the great God, the great God said this case, need to distinguish between two states,

One is the default state, which is a browser other than safari (you need to determine if the browser is Safari)

The second is the Safari browser state, (as the company only asked to test Uc,qq browser, gu, found in iOS QQ browser, judgment will also come to be safari, so in writing judgment, pay attention to the processing of mobile phone QQ browser)

Write the event that determines the browser first:

functionvar//var////alert ( useragent); if return "Safari";}}

And then write the specific popup event

======== Click. Pop-up pop-up box =================

//======== Click. Pop -up pop-up box =================    //index-Personal Center default Android$ (". Ic_per"). Click (function() {
Safariif(Mybrowser () = = "Safari"){//alert ("This is Safari");A.zhezhao (); $(' #login_box '). FadeIn (500); $("Html,body,.mask-layer"). Height ($ (window). Height ()); $(". Mask-layer"). Height ($ (document). Height ()); $('. Mask-layer '). CSS (' position ', ' absolute ')); varDltop = $ (document). ScrollTop () + $ (window). Height ()-275; $("#login_box"). Height ($ (document). Height ());            Console.log (Dltop); Console.log ($ ("#login_box"). Height ()); $(' #login_box '). css ({"Position": "Absolute",                "Top": Dltop + "px",                "Height": $ (document). Height ()}); }
Other BrowsersElse {//alert ("This is not the other");a.zhezhao_in (); //Pop-up box series$ (' #login_box '). FadeIn (500); $("Body,.mask-layer"). Height ($ (window). Height ()); }        });

Assi, however, there are some details of the problem with the default is not the same   fortunately, the product is no longer die-key This problem ...

About iOS Safari, the bottom of the page pops up the landing mask layer, the problem solved when you exhale the soft keyboard