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

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

  •  16-07-2023
  •  | 
  •  

Pregunta

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".

¿Fue útil?

Solución

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.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top