While using Google Chrome on a mobile device, users may encounter a white box that unexpectedly appears

I'm in the process of developing a website. Check out the website here. You can view the code on Github as well. Access the code here. If you prefer, here is the HTML and CSS:
HTML:

<!DOCTYPE html>
<html lang="en">
...
// HTML code goes here
...
    </div>
<script src="Assets/jquery-3.3.1.min.js"></script>
<script src="Assets/Script.js"></script>
</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css?family=K2D:100');
...
// CSS code goes here
...


When attempting to scroll on mobile (using Google Chrome), a white box appears at the bottom of the page. It disappears when I lift my finger off the screen. Here's an image for reference: https://i.sstatic.net/bDxa8.jpg I'd like to understand why this occurs and how to eliminate it?

Answer №1

The problem arises from the presence of the "background-attachemnt:fixed;" property set on the body element. Removing this property resolves the issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues arise when attempting to include a hyphenated '_' attribute to a tag via the assign method within a function

Currently, I am utilizing a function to dynamically generate input-groups based on the number chosen by the user: const tag = (tag, className, props = {}) => Object.assign(document.createElement(tag), {className, ...props}); Everything is function ...

Extract JSON information using JavaScript or jQuery within the client's browser

I am looking to extract data on the client side by storing it in an input field after serializing it. JavaScriptSerializer objJavaScriptSerializer = new JavaScriptSerializer(); string jsonString = objJavaScriptSerializer.Serialize(_statusVal); jsonFmtStat ...

Exploring the power of Vue.js with dynamic HTML elements and utilizing Vue directives within Sweet Alert

new Vue({ el: '#app', data(){ results: [] } }); I need assistance with implementing Vue directives, events, etc. within the markup of a Sweet Alert. The goal is to display an alert using Sweet Alert that include ...

Is it feasible to overlay a PNG image on top of a button while still allowing the button to be clickable?

Can you place an image (.png) on top of a button and still make the button clickable? https://i.sstatic.net/9Z8nH.jpg ...

Establishing a small boutique utilizing Vue.observable for property getters

I am currently importing the createStore function into a store.js file and passing an object with state properties and mutation functions as an argument, which is working well. createStore.js import Vue from 'vue' function createStore({ state, ...

I am experiencing difficulties with the PHP login form on MAMP as it is not loading properly, displaying only a

Having trouble with php not loading when I open my browser. Here is my database info: MySQL To manage the MySQL Database, you can use phpMyAdmin. If you need to connect to the MySQL Server from your own scripts, use these connection parameters: Host ...

Styling the center menu

Is there a way to horizontally center this top menu using CSS? https://i.sstatic.net/9yvJf.png This is the HTML structure I am working with: <div class="wrapper_menu_hoz"> <div class="container_24 "> <div class="gr ...

In PHP, the hidden input type doesn't always provide true concealment within a form if the value being passed

I am attempting to populate a hidden input field with the value of an XML string generated from an array. However, when I set the hidden field value using the XML string, it is being displayed in the HTML output. Surprisingly, if I use plain text as the va ...

Nextjs: where all roads lead back to the homepage

Having an issue in my app where all redirects keep leading back to the homepage. The problem seems to stem from my Navbar.js component, as shown below. Despite adding the required route in the Link tag for next-js, both client and server compilation is suc ...

Obtaining JSON responses with NodeJs: A beginner's guide

I am currently utilizing NodeJs and MongoDb for my back-end services. Within my collection, there are various documents with fields named _id and Name. My goal is to receive the output in JSON objects structured as follows: [ { Name:"Paul" }, ...

Retrieving data from MongoDB for rendering on an HTML page

I have successfully inserted data into my MongoDB database, but I am facing issues with the "get" function to display this data on my HTML page. My current setup involves using Node.js with Express framework and Angular for front-end development and routi ...

Challenges with removing and adding controllers in Angular versions 1.2 and above

I am currently in the process of migrating my app from Angular 1.2 to 1.3 and I am encountering an issue with the different behaviors of the removeControl and addControl functions. Within my directive, I have implemented a functionality that escapes regis ...

What is the process of changing the name of an object's key in JavaScript/Angular?

In my possession is an established entity, this.data = { "part": "aircraft", "subid": "wing", "information.data.keyword": "test", "fuel.keyword": "lt(6)" } My objective is to scrutinize each key and if the key includes .keyword, then eliminat ...

Despite using callbacks when passing props in React JS components, the rerendering still occurs

In my React project, I implemented callbacks to prevent excessive rerendering due to the large amount of data being displayed and numerous buttons that trigger these rerenderings when clicked by the user. The useCallback hooks are effective in preventing ...

Is the length of a complex match in Angular JS ng-if and ng-repeat greater than a specified value?

In my code, there is an ng-repeat that generates a table based on one loop, and within each row, another cell is populated based on a different loop: <tbody> <tr ng-repeat="r in roles | limitTo: 30"> <td>{{r.name}}</td> ...

Is there a way to use Protractor to test ASP.NET WebForms (not Angular)?

I am completely new to using protractor for testing .NET Applications. I am currently in the process of creating an automation testing script from scratch. The following is the HTML code: <div class = "top"> <span id = "welcome"> <em>Hi& ...

The items in the array cannot be identified

var userInput = prompt('Select a fruit:'); var fruitList = ["apple", 'grapes', "orange"]; for(var i=0; i<fruitList.length; i++); if(userInput == fruitList[i]){ alert("Apologies, we are currently out of ...

Creating an expo apk using eas buildWould you like a tool for generating

Following an update to Expo, the process of building apk files using expo build:android -t apk is no longer supported. Instead, it now recommends using eas builds with the command eas build -p android --profile preview. However, this resulted in building a ...

Explore the functionality of the webix grid by clicking on the url column

I've recently created a table in Webix, and I have a column labeled "TBD" where I display a URL. My question is: how can I make this URL, 'https://pops.dra.com/TBD.php?jour=$adep&arc=$ads', clickable? while($row = mysqli_fetch_array($req ...

Creating Diverse Pages with Unique Variables on Identical Layouts in Jekyll

I am currently using Jekyll to create static HTML pages, but I want to have the ability to generate similar layouts with different variables. Let me provide a simple example to illustrate my point: _config.yml title: Foo and Bar Generated index.html &l ...