Html 内容更改时Chrome地址栏问题
自从移动设备上的chrome版本73以来，我注意到chrome浏览器地址栏有一个问题。 我有一个包含大量内容的页面，因此有必要向下滚动以查看所有内容。滚动时，浏览器地址栏隐藏。在页面的底部有一个按钮，可以进一步查看。单击底部后，内容将更改，并显示“白色条纹/内容”。这些“白色条纹/内容”与浏览器的地址栏具有相同的高度。它会一直保持，直到我滚动到顶部 基本html文件：Html 内容更改时Chrome地址栏问题,html,css,scroll,Html,Css,Scroll,自从移动设备上的chrome版本73以来，我注意到chrome浏览器地址栏有一个问题。 我有一个包含大量内容的页面，因此有必要向下滚动以查看所有内容。滚动时，浏览器地址栏隐藏。在页面的底部有一个按钮，可以进一步查看。单击底部后，内容将更改，并显示“白色条纹/内容”。这些“白色条纹/内容”与浏览器的地址栏具有相同的高度。它会一直保持，直到我滚动到顶部 基本html文件： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="expires" content="FRI, 13 APR 1999 01:00:00 GMT">
<meta name="viewport" content="user-scalable=no, width=device-width,
initial-scale=1, minimum-scale=1, maximum-scale=1" />
<meta name="description" content="">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
crossorigin="anonymous">
<link href="../content/myApp.css" rel="stylesheet">
<script>
function loadContent() {
document.getElementById('intro').style.display = 'none';
document.getElementById('content').style.display = 'block';
}
</script>
</head>
<body>
<div class="container">
<div>
<div class="toolbar flex-display flex-alignCenter flex-row
flex-spaceB kd_color1">
<div class="flex-display flex-alignCenter">
<div class="css_toolbar_menu_btn material-flex
text-left">
<a href="#" role="button" class="btn btn-clear"
data-toogle="offcanvas" id="btn_menu"></a>
</div>
<div class="css_breadcrumb flex-display flex-row">
<div class="hidden-xs"><span class="glyphicon
glyphicon-apple">toolbar</span></div>
</div>
</div>
<div class="flex-display flex-alignCenter flex-row flex-end
flex-ItemCenterJ toolbox">
<div class="css_toolbarIcon">
<div>
<a href="#" role="button" class="btn btn-clear
css_toolbarBtn hidden-xs"">
<span class="sr-only"></span>
</a>
</div>
<div>
<a href="#" role="button" class="btn btn-clear
css_toolbarBtn hidden-xs">
<span class="sr-only"></span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="main-ctrl-start" class="">
<div>
<div class="lead text-left css_textContainer" id="intro">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Fugit, laboriosam tenetur ullam, nam distinctio in ipsa
repellendus consequatur unde reiciendis maiores eaque
quos soluta voluptas! Consequatur ex sapiente culpa
est!Lorem ipsum dolor sit amet consectetur adipisicing
elit. Fugit, laboriosam tenetur ullam, nam distinctio in
ipsa repellendus consequatur unde reiciendis maiores
eaque quos soluta voluptas! Consequatur ex sapiente
culpa est!
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Fugit, laboriosam tenetur ullam, nam distinctio in ipsa
repellendus consequatur unde reiciendis maiores eaque
quos soluta voluptas! Consequatur ex sapiente culpa est!
<br>
<br>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Fugit, laboriosam tenetur ullam, nam distinctio in ipsa
repellendus consequatur unde reiciendis maiores eaque
quos soluta voluptas! Consequatur ex sapiente culpa est!
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Fugit, laboriosam tenetur ullam, nam distinctio in ipsa
repellendus consequatur unde reiciendis maiores eaque
quos soluta voluptas! Consequatur ex sapiente culpa est!
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Fugit, laboriosam tenetur ullam, nam distinctio in ipsa
repellendus consequatur unde reiciendis maiores eaque
quos soluta voluptas! Consequatur ex sapiente culpa est!
<br>
<br>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Fugit, laboriosam tenetur ullam, nam distinctio in ipsa
repellendus consequatur unde reiciendis maiores eaque
quos soluta voluptas! Consequatur ex sapiente culpa est!
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Fugit, laboriosam tenetur ullam, nam distinctio in ipsa
repellendus consequatur unde reiciendis maiores eaque
quos soluta voluptas! Consequatur ex sapiente culpa est!
<br>
<br>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Fugit, laboriosam tenetur ullam, nam distinctio in ipsa
repellendus consequatur unde reiciendis maiores eaque
quos soluta voluptas! Consequatur ex sapiente culpa est!
</div>
<div id="content" style="display: none;">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Velit, dignissimos! Sit vero, tempore porro magnam
laudantium inventore eos et, quia enim sint, repellendus
quae doloremque itaque tenetur atque eaque sequi.
<br>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Veritatis voluptatem, numquam cumque nisi omnis, quod
accusamus error quasi consequatur iusto necessitatibus,
similique itaque libero quis vel voluptas eius placeat
sunt.
</div>
<div class="css_btnGroup">
<div class="flex-display flex-row flex-spaceA">
<a href="#" role="button" class="btn btn-primary
flex-display"
onclick="loadContent()">
<div>
next
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
- 向下滚动并确保浏览器地址栏隐藏
- 点击按钮更改内容
- 视图完全可见（工具栏）
- 浏览器中的地址栏仍处于隐藏状态
- “白色条纹”出现在底部
窗口强制滚动。滚动到（0，0）可能是我的body和container标签的CSS问题 @Pete:我不明白你的意思。我描述了这个问题。我展示了它的行为和再现性。我添加了代码来重现问题，最后但并非最不重要的一点是，我针对该主题提出了一个特定的问题。那么，我将重构itEdited问题。@Pete:不明白。我描述了这个问题。我展示了它的行为和再现性。我添加了代码来重现这个问题，最后但并非最不重要的是，我针对这个主题问了一个特定的问题。
@font-face {
font-family: Roboto_Regular;
src: url(fonts/Roboto-Regular.ttf) format("truetype");
}
@font-face {
font-family: Roboto_Light;
src: url("fonts/Roboto-Light.ttf") format("truetype");
}
* {
margin: 0;
padding: 0;
}
*,
:after,
:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
direction: ltr;
overscroll-behavior-y: none;
}
html {
height: 100%;
border: 1px solid #000;
}
body {
line-height: 150%;
font-family: Roboto_Light, Verdana, Arial, Helvetica, sans-serif;
padding: 0;
background-color: #f6f6f6;
position: relative;
height: 100%;
border: 1px solid #000;
}
body.splashscreen {
background: #fff;
}
.css_wrapper {
overflow: hidden;
}
.container {
width: 100%;
height: 100%;
}
.btn-myAppDefault {
z-index: 1;
/*wird in kundenskin überschrieben, wenn button angepasst werden sollen*/
background: #e6e4e1;
border: #e6e4e1;
color: #333;
-moz-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-o-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
border-radius: 2px;
margin: 0.4em 0.2em 1em;
}
.btn-myAppDefault:active,
.btn-myAppDefault:focus,
.btn-myAppDefault:hover {
-webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
background: #e6e4e1;
border: #e6e4e1;
color: #333;
}
.btn-myAppDefault > div {
display: table-cell;
padding: 0 0.4em;
vertical-align: middle;
text-align: center;
min-width: 5em;
}
.btn-myAppDefault > div span.glyphicon:first-child {
padding-right: 0.5em;
margin: 0;
}
.btn-myAppDefault > div span.glyphicon:last-child {
padding-left: 0.5em;
margin: 0;
}
.btn-myAppDisabled {
opacity: 0.2;
cursor: default;
}
.btn:active {
/* disable box-shadow @ myApp-navbar icons */
-webkit-box-shadow: none;
-ms-box-shadow: none;
box-shadow: none;
}
.css_btnGroup_space > div {
margin: 0 1em;
}
#intro {
margin: 1em 0 4.8em;
}
#intro .btn-myAppDefault {
margin-top: 2em;
}
.btn {
border: 0 solid transparent;
}
.btn-clear {
background: none;
}
.toolbar > div:not(.toolbox) {
width: auto;
height: 100%;
}
.toolbar {
-webkit-box-shadow: 0 3px 3px #ccc;
-ms-box-shadow: 0 3px 3px #ccc;
box-shadow: 0 3px 3px #ccc;
height: 2.2em;
padding: 0 15px;
margin: 0 -15px 0.4em;
}
.toolbar div {
display: inline;
}
.toolbar .css_breadcrumb div {
padding-right: 1em;
}
.toolbar .visible-xs {
display: inline !important;
}
.css_toolbarIcon:last-child {
margin-left: 0;
}
.flex-display {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: -moz-flex !important;
display: -webkit-flex !important;
display: flex !important;
}
.flex-row {
-webkit-box-orient: horizontal;
-ms-flex-direction: row;
-moz-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
.flex-center {
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.flex-item {
-webkit-box-flex: 1;
-webkit-flex: 1 1 0;
-moz-box-flex: 1;
-moz-flex: 1 1 0;
-ms-flex: 1 1 0;
flex: 1 1 0;
width: 100%;
}
.flex-column {
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.flex-start {
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.flex-end {
-webkit-box-pack: end;
-moz-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.flex-alignCenter {
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.flex-spaceB {
-webkit-box-pack: justify;
-moz-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.flex-spaceA {
-webkit-box-pack: justify;
-moz-box-pack: justify;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-align-content: space-around;
align-content: space-around;
}
.flex-spaceC {
-webkit-box-pack: justify;
-moz-box-pack: justify;
-webkit-justify-content: center;
-ms-flex-pack: distribute;
justify-content: center;
-webkit-align-content: center;
align-content: center;
}
.flex-stretch {
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: stretch;
-moz-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.flex-toColumn {
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.flex-toRow {
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.flex-alignEnd {
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
}
.flex-ItemCenterJ {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
}
.flex-flow {
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.flex-roundSuccess {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: justify;
-moz-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
-ms-align-content: stretch;
align-content: stretch;
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.btn:active,
.btn:focus,
.btn:hover,
body a:active,
body a:focus,
body a:hover {
outline: none;
text-decoration: none;
}
.kd_fontColor {
color: #333333;
}
.kd_color1 {
background: #cecac5;
}
.kd_color1 *,
.kd_color1 *:hover,
.kd_color1 *:active,
.kd_color1 *:focus {
color: #333333;
}
.kd_color1-rgb {
background: rgba(206, 202, 197, 0.7);
}
.kd_color1-rgb *,
.kd_color1-rgb *:hover,
.kd_color1-rgb *:active,
.kd_color1-rgb *:focus {
color: #333333;
}
.kd_color2 {
background: #1d3061;
}
.css-code-container {
margin-top: 1em;
}
/*=============================================================================*/
@media only screen and (orientation: portrait) {
.flex-toColumn {
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.flex-toRow {
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.flex-alignEndPortrait {
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
}
}
@media only screen and (orientation: landscape) {
body.intro .container {
padding-bottom: 36px;
margin-bottom: -36px;
}
}
@media (max-width: 767px) {
/* tablet */
}
@media (max-width: 767px) and (orientation: portrait) {
/* tablet portrait */
}
@media (max-width: 767px) and (orientation: landscape) {
/* tablet landscape */
body {
font-size: 1.2em;
}
}
@media (min-width: 768px) {
.toolbar div {
padding: 0.1em 0 0.1em 0;
}
.css_wrapper {
margin: 0 2em;
}
.toolbar {
padding: 0 30px;
margin-bottom: 1.6em;
}
#load_page .flexWrapper {
margin-top: 2em;
}
}
@media (min-width: 992px) {
body {
font-size: 1.6em;
}
.toolbar {
font-size: 1em;
}
body.intro .container {
padding-bottom: 48px;
margin-bottom: -48px;
}
}
@media (min-width: 1200px) {
body {
width: 1024px;
height: 728px;
margin: auto;
margin-top: 0;
}
body.intro {
min-height: 728px;
height: 100%;
}
html {
background-color: #e5e5e5;
}
}
@media (min-width: 1200px) and (min-height: 828px) {
body {
margin-top: 60px;
}
}