0
我剛剛注意到當我滾動到我的幾個網頁的底部時，滾動回到頂部，並且回到底部同樣，背景應該在底部出現一個大的空白區域。我查看了其他幾個解決方案，例如：Random white space at bottom of page but only on mobile，但該解決方案似乎無法解決問題。我無法通過選擇移動設備來使用Chrome開發人員工具複製該問題，因此我無法排除代碼中可能導致此行爲的錯誤。下面是其中一個頁面的相關代碼：滾動到底部並備份後，出現在頁面底部的空白（手機）
function offset(elementToOffsetBy, elementToOffset, minScreenSize) {
\t var width = $(window).width();
\t if(width >= minScreenSize) {
\t \t var x = document.getElementById(elementToOffsetBy);
\t \t var height = x.offsetHeight;
\t \t var top_offset = height * -1;
\t \t document.getElementById(elementToOffset).style.top = top_offset + "px";
\t \t document.getElementById(elementToOffset).style.bottom = "0px";
\t }
}body, html {
\t height: 100%;
}
#portfolio {
\t background: url("https://ndmikkiholicdotcom.files.wordpress.com/2016/06/black-and-white-brick-wall-background-white-brick-wall-image-decoration-picture-white-brick-wall.jpg") no-repeat center center fixed;
\t background-size: cover;
}
.topnav {
\t overflow: hidden;
}
.topnav a.selected {
\t background-color: rgba(242, 242, 242, .3);
\t color: #3b4e6b;
}
.topnav a {
\t float: left;
\t display: block;
\t color: #f2f2f2;
\t text-align: center;
\t text-decoration: none;
\t font-size: 20px;
\t padding: 20px 25px;
}
.topnav a:hover {
\t color: #3b4e6b;
\t background-color: rgba(242, 242, 242, .3);
}
.topnav .icon {
\t /* Hide icon to expand menu */
\t display: none;
}
/* When screen is less than 600px wide, hide all links except the first one, and display the icon to expand the menu */
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
/* When screen is less than 600px wide, display all links vertically when icon is clicked */
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
\t color: #f2f2f2;
\t background-color: #3b4e6b;
}
.topnav.responsive a:hover {
\t color: #3b4e6b;
\t background-color: #f2f2f2;
}
}
.portfolio_img {
\t width: 80%;
\t height: 80%;
\t margin-left: 4em;
\t margin-right: 4em;
\t margin-bottom: 3em;
\t margin-top: 3em;
}
.hover_img {
\t display: inline-block;
\t width: 100%;
\t height: 100%;
}
.hover_img:hover img {
\t opacity: .2;
}
.hover_img:hover .center_text {
\t display: block;
}
.center_text {
\t position: absolute;
\t top: 50%;
\t left: 50%;
\t transform: translate(-50%, -50%);
\t display: none;
\t font-weight: bold;
}
.col-md-4 {
\t position: relative;
\t text-align: center;
}
.row {
\t display: flex;
\t display: -webkit-flex;
\t flex-wrap: wrap;
}<!DOCTYPE html>
<html>
\t <head>
\t \t <title>Portfolio</title>
\t \t <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
\t \t \t rel="stylesheet">
\t \t <link href="styles.css" rel="stylesheet" type="text/css">
\t \t <link href="image_styles.css" rel="stylesheet" type="text/css">
\t \t <link rel='shortcut icon' type='image/x-icon' href='logo.ico'/>
\t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" \t ></script>
\t \t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
\t \t <script src="navbar.js"></script>
\t </head>
\t
\t <body id="portfolio">
\t \t <div class="topnav" id="myTopnav">
\t \t \t <a href="index.html">Home</a>
\t \t \t <a href="about.html">About</a>
\t \t \t <a href="#" class="selected">Portfolio</a>
\t \t \t <a href="contact.html">Contact</a>
\t \t \t <a class="icon" onclick="myFunction()">☰</a>
\t \t </div>
\t \t
\t \t <div class="container">
\t \t \t <h1><b>Projects</b></h1>
\t \t \t <div class="row">
\t \t \t \t <div class="col-md-4">
\t \t \t \t \t <div class="hover_img">
\t \t \t \t \t \t <img class="portfolio_img" src="https://pixy.org/images/placeholder.png" alt="Breakout">
\t \t \t \t \t \t <div class="center_text"><a href="https://github.com/" target="_blank">Breakout</a>.</div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t
\t \t \t <h1><b>Websites</b></h1>
\t \t \t <div class="row">
\t \t \t \t <div class="col-md-4">
\t \t \t \t \t <div class="hover_img">
\t \t \t \t \t \t <img class="portfolio_img" src="https://pixy.org/images/placeholder.png" alt="Flashcard App">
\t \t \t \t \t \t <div class="center_text"><a href="https://pixy.org/images/placeholder.png" target="_blank">Chemistry Flashcard Web App</a></div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div class="col-md-4">
\t \t \t \t \t <div class="hover_img">
\t \t \t \t \t \t <img class="portfolio_img" src="https://pixy.org/images/placeholder.png">
\t \t \t \t \t \t <div class="center_text"><a href="https://pixy.org/images/placeholder.png" target="_blank">Personal Website</a></div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div class="col-md-4">
\t \t \t \t \t <div class="hover_img">
\t \t \t \t \t \t <img class="portfolio_img" src="https://pixy.org/images/placeholder.png">
\t \t \t \t \t \t <div class="center_text"><a href="https://pixy.org/images/placeholder.png" target="_blank">Website</a></div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <h1><b>Publications</b></h1>
\t \t \t <div class="row">
\t \t \t \t <div class="col-md-4">
\t \t \t \t \t <div class="hover_img">
\t \t \t \t \t \t <img class="portfolio_img" src="https://pixy.org/images/placeholder.png">
\t \t \t \t \t \t <div class="center_text">Author of <a href="https://www.arcadiapublishing.com/" target="_blank">Book</a></div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div class="col-md-4">
\t \t \t \t \t <div class="hover_img">
\t \t \t \t \t \t <img class="portfolio_img" src="https://pixy.org/images/placeholder.png" alt="Red Alert Politics">
\t \t \t \t \t \t <div class="center_text"><a href="http://redalertpolitics.com" target="_blank">Red Alert Politics</a></div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div class="col-md-4">
\t \t \t \t \t <div class="hover_img">
\t \t \t \t \t \t <img class="portfolio_img" src="https://pixy.org/images/placeholder.png">
\t \t \t \t \t \t <div class="center_text"><a href="https://www.loneconservative.com" target="_blank">Lone Conservative<a/></div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </body>
</html>這裏是頁面的截圖之前： 
這裏是頁面的截圖後： 
可能是相對於https://stackoverflow.com/questions/24944925/background-image-jumps-when-address-bar-hides-ios-android-mobile-chrome –