From 1837a4e0366fb7cdd3fcb50c9b2c355dd784289d Mon Sep 17 00:00:00 2001 From: Xander Luciano Date: Fri, 12 Oct 2018 02:25:17 -0700 Subject: [PATCH] Fix box sizing on examples Using width:100% and padding without proper box-sizing causes elements to overflow on mobile, enabling overscroll-behavior in the X direction. --- examples/misc_controls_deviceorientation.html | 1 + examples/misc_controls_fly.html | 5 ++++- examples/misc_controls_map.html | 2 +- examples/misc_controls_transform.html | 3 +++ 4 files changed, 9 insertions(+), 2 deletions(-) diff --git a/examples/misc_controls_deviceorientation.html b/examples/misc_controls_deviceorientation.html index 798122134e27c8..46f3272fddc838 100644 --- a/examples/misc_controls_deviceorientation.html +++ b/examples/misc_controls_deviceorientation.html @@ -20,6 +20,7 @@ font-size:13px; font-weight: bold; text-align:center; + box-sizing: border-box; } a { diff --git a/examples/misc_controls_fly.html b/examples/misc_controls_fly.html index d35d69a9cdf450..fb4f2e3b2387ec 100644 --- a/examples/misc_controls_fly.html +++ b/examples/misc_controls_fly.html @@ -23,6 +23,7 @@ top: 0px; width: 100%; padding: 5px; z-index:100; + box-sizing: border-box; } a { @@ -30,7 +31,9 @@ color: #0080ff; } - b { color:orange } + b { + color:orange + } diff --git a/examples/misc_controls_map.html b/examples/misc_controls_map.html index 7466186ff54941..1add4cdb2ad8a5 100644 --- a/examples/misc_controls_map.html +++ b/examples/misc_controls_map.html @@ -22,7 +22,7 @@ position: absolute; top: 0px; width: 100%; padding: 5px; - + box-sizing: border-box; } a { diff --git a/examples/misc_controls_transform.html b/examples/misc_controls_transform.html index a5ba2d97550b90..a8b800f98b58ee 100644 --- a/examples/misc_controls_transform.html +++ b/examples/misc_controls_transform.html @@ -15,12 +15,15 @@ line-height: 30px; overflow: hidden; } + #info { position: absolute; top: 0px; width: 100%; padding: 15px; z-index:100; + box-sizing: border-box; } + a { color: white; }