The side padding with 100% width causes the div to overflow the screen. So we remove the side padding (no used anyways), and also tell it to use box-sizing: border box to properly calculate the box sizing as expected.
@@ -3,7 +3,7 @@
<head>
<title>three.js webgl - trackball controls</title>
<meta charset="utf-8">
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1">
+ <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
html {
width: 100%;
@@ -20,19 +20,14 @@
background-color: #fff;
margin: 0px;
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
}
#info {
color:#000;
position: absolute;
top: 0px; width: 100%;
- padding: 5px;
-
+ padding: 5px 0;
+ box-sizing: border-box;
a {
Xander Luciano