Position: safari pitfalls of fixed, fixedsafari

Position: safari pitfalls of fixed, fixedsafari

Mobile development is now becoming more and more formal, and many problems have been supported and corrected by major browser vendors. For example, Safari is now supported by the fixed under ipone to be mentioned today, however, there are still some pitfalls.

This pitfall is about safari full screen mode. When the page enters full screen mode (after scrolling down, the page will enter full screen mode by default), the bottom of the page cannot interact, it seems that the event is invalid. In this case, you cannot click any toolbar at the bottom of the window or fixed toolbar at the bottom of the fixed, at this time, clicking the button will only trigger the Safari exit full screen action, and then bring up the Safari toolbar. You need to click these interactive items again to trigger the action. For example, you need to click the button or link twice to trigger the action, this behavior is like a transparent mask at the bottom of the page, which may be a bit difficult. You can see the test case below:

<! DOCTYPE html> 
In the above case, it is obvious that when the full screen mode is used, when the fixed element at the bottom is high enough, some of the touch and other events are still triggered, so we can initially find this problem, in full screen mode, safari creat a transparent mask at the bottom to exit the full screen mode. The zIndex priority of this mask is much higher than any node of the dom tree on the entire page.
In fact, in actual development, there may be some links or other touchend events at the bottom, so this problem only makes people feel that the interaction is poor and will not cause actual problems, however, the content of the fixed toolbar at the bottom of my most recently needs to be moved. In full screen mode, touchmove does not trigger the mask event to exit full screen mode, at this time, it seems that the event has failed, and it is a pitfall. Currently, the solution can only be determined by devices and browsers, so that it can be fixed to the top to avoid this problem.
PS: In addition, when Samsung android (the specific machine model cannot be remembered) is used to scale down the device, a similar mask will be created, resulting in scaling failure.

Position: How can I use fixed ?, That is, do not let the following DIV come to the top ~~~ Let's take a look at this figure.
Position: fixed is relative to the fixed position of the window. You can directly give the height of the side where you put it. See if this does not mean position: fixed just adds a 5px margin to the above div. Isn't it enough?
 
Position: fixed is used as a floating bar, but it must be pulled under the webpage to display the new release.
<Style>
* {Margin: 0; padding: 0 ;}
</Style>
 
<Div style = "height: 1000px; width: 100px; border: #000 1px solid;"> test </div>
<Div id = "box" style = "position: fixed; border: red 1px solid; z-index: 5; right: 0; top: 0; width: 200px; height: 400px; display: none; "> floating box </div>
<Div id = "box1" style = "position: fixed; border: red 1px solid; z-index: 5; right: 0; top: 0; width: 200px; height: 200px; "> floating box </div>
<Script type = "text/javascript">
Window. onscroll = function ()
{
Document. getElementById ("box1" 2.16.innerhtml#document.documentelement.scrollheight-document.doc umentElement. clientHeight;
If(document.documentelement.scrolltop=document.documentelement.scrollheightdocument.doc umentElement. clientHeight)
{
Document. getElementById ("box"). style. display = "block ";
}
Else
Document. getElementById ("box"). style. display = "none ";
}
</Script>
 
I just wrote it. I will study it myself!