Floating layer scrolling problem

Primer

Use position transformto achieve the effect of a floating layer h5 slide out from the right, but in the mobile browser when sliding around, the page had about a scroll bar, a floating layer came out. This is a problem page , mobile client access as follows:

59-qrcode-problem

This phenomenon should not occur, the problem easy to solve, but why is this so? He thought for a moment as if he knew the relevant point, but unclear about, so this comb.

the reason

Produced a scroll, it is natural for them to think of overflowproperty, then the first look.

overflowProperty specifies whether the block container element content is cut overflow, is overflow-xand overflow-yshorthand.

Name	overflow
Possible values	visible
Defaults	visible
It applies to	Container block level format and the context of established box
Succession	no

visible : This value indicates that content will not be cut, may be rendered outside the box.
hidden : This value represents the contents of which are cut, and should not provide a user interface to scroll to view the contents outside the clip area.
Scroll : This value represents the contents of which are cut, and if the user agent uses scrolling mechanism (e.g., a scroll bar or pane) is visible on the screen, regardless of whether any content of the box is cut, the mechanism should display a box. This is to avoid any problems rolling in a dynamic environment, appear and disappear due strip. When this value is specified and the target medium is print, overflowing content may be printed or may not be printed. When used in the table boxes when this value with visible act in concert.
Auto : This value represents the dependent user agent, but should provide a scrolling mechanism for the overflow boxes. When used in the table boxes when this value with visible act in concert.

Through the above understanding, I would like to correct it evaluates to autoan understanding of: the browser will automatically determine whether a scrolling based on content. The face of it seems to be the case, but the standard is not the case, but recommended. If the user agent not to provide scrolling, it is not, and is not necessarily a scroll, which are dependent on the user agent.

Again analyze the above problem, the main structure and style are as follows:

<!doctype html>
<html>
  <body>
    <div class="pop"></div>
  </body>
</html>

html {overflow-x: hidden;}
html,body { height: 100%; }
body { position: relative; }
.pop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  transform: translateX(100%);
}

bodyNot explicitly set overflowthe value, so by default visible, due to the floating layer uses transformbeyond the viewing area, the first to be sure bodyof overflowis valid.

Setting bodythe width of the effect of pages , the mobile access terminal follows:

59-qrcode-body

Findings are consistent with overflow: visibleresults, no scroll bars around.

Then we have the following conjecture: as long as beyond the visible area will have a scroll . In the foregoing, based on the floating layer is disposed transformoutside the visible region, which is the effect of a page , the mobile access terminal follows:

59-qrcode-scroll

Like the results of conjecture, it also shows that from the outset not bodyhad a scroll, but the viewport produced a scroll. Continue to find information, found the following Standards:

User agent must be provided on the root element overflowproperty applies viewport. When the root element is an HTML html element and its overflowvalue visible, and it has bodyan element as a descendant, such a user agent must first descendant element overflowattribute values to the viewport. If visibleapplied to the viewport, it must be interpreted as auto. Elements from the spread of values must have a overflowvalue has been used visible.

From the above description and the practical test, we estimate the case body of the overflowproperties to the viewport on, resulting in rolling. Set the body overflow-x: hidden, found no rolling around, and mobile client access as follows:

59-qrcode-normal

postscript

On the IOS and Android we tested four or five browsers will appear to scroll left and right, but the Chrome browser on some Android phones did not appear to scroll, for example, 6 red rice phone. Another point is: PC client browser will not produce rolling around.

In addition, the fact, that standard is not very clear, plus standard is one thing, implementation is not necessarily conform to various standards.

The above are personal opinions in conjunction with actual test data and, if so, really hard to say, but can be used as a direction of thinking.