A Left to Right Wiggle in a WebView When it Should Fit to the Page

StackOverflow https://stackoverflow.com/questions/23503389

  •  16-07-2023
  •  | 
  •  

Question

After following all tips here to disable scrolling nothing worked.

Why is it that my webview will shift ever so slightly to the left or right when it should just fit to the page without any horizontal scrolling?

Left Image: Initial Load

Right Image: After swiping to the left.

enter image description here ... enter image description here

HTML:

<html>
    ...
    <body id="visitorinfo">
        <div class="visitor">
            <div class='titlebox'><img src="../images/helloworld.png"/></div>
        </div>
    </body>
</html>

CSS:

#visitorinfo{
    max-width:500px;
    text-align:left;
    font-size:16px;
    display:block;
    overflow:hidden;
    margin:5px;
}
.titlebox{
    float:center;
    max-width:100%;
    padding:5px;
    text-align:center;
}
.titlebox img{
    width:100%;
}
.visitor{
    margin-bottom:35px;
    display:block;
    overflow:hidden;
    margin:5px 10px;
    word-wrap:break-word;
}

Note: This will happen with an image and also with text. Also, I left out redundant "right swipe".

Was it helpful?

Solution

Causation: From here: "The margin clears an area around an element (outside the border)." Therefore, since the WebView's webpage filling area is border of the body tag and everything inside of it, adding padding around that causing the little extra left & right (and likely top & bottom) scrolling.

To Fix: Just remove the #visitorinfo's margin:5px;. You can see here why this will work.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top