Just finished creating a website that features fixed images as backgrounds with text scrolling on top of them. I've noticed an issue when using Chrome - the scrolling stops briefly between backgrounds, pauses for about a second, and then resumes. I'm not sure how to resolve this issue, so any suggestions would be greatly appreciated.
If you'd like to take a look at the site, here's the link:
I think the reason for the delay is that the next background image is not loaded and displayed until it comes into view. Because your images are of high quality, this delay is more noticeable.
(You may notice this delay only once between two background images when you initially scroll down.)
You can try reducing the size of the images or preloading them using CSS or JavaScript.
To preload using JavaScript
<script>
bg1 = new Image();
bg2 = new Image();
bg3 = new Image();
bg1.src="url here";
bg2.src="url here";
bg3.src="url here";
</script>
To preload using CSS only
body:after{
position:absolute; z-index:-1;
content: url(bg1.png) url(bg2.png) url(bg3.png);
}
Having encountered the same problem when using Chrome, I wonder if it could be due to content being loaded as you scroll (potentially utilizing a lazy loading technique with a twist)?
I am implementing a simple 2-column layout and I want to utilize Flexbox to ensure equal heights for the columns: HTML <div class="row flex"> <!-- menu --> <div class="col-xs-4"> <aside> Menu content wi ...
Can someone help me with disabling the select option in my MVC template code using backbone.js? I tried using readonly="readonly" and disable="disable", but it sends null as value and doesn't update my address. <div class="login-register" data-val ...
I am working on a hamburger menu with a dropdown feature, and I want the entire dropdown menu to be clickable instead of just the text. Below is my current code which only allows clicking on the text. cshtml <nav class="navbar fixed-top navbar-dark bg ...
Is there a way to restrict clicking outside the blue circle? The goal is to only allow opening by clicking on the svg itself, This includes everything, even white space inside the svg. How can this be achieved in the code? The current behavior is that ...
What could be causing my code to malfunction? I am attempting to determine if the paragraph text color is white (as determined by CSS settings). If it is indeed white, I want to change it to black for better visibility. function adjustColor() { if (d ...
My goal is to position a Box tag at the bottom of the page. Current Behavior: https://i.stack.imgur.com/ZupNo.png I am looking to place a TextField and send button at the bottom of the page on both browser and mobile. I want user messages to be above th ...
Can someone assist me in figuring out how to send more content in an email? I have been attempting to include additional information in the email, but haven't been successful. I am using ajax to call and send the email, however, only basic emails seem ...
I am struggling to implement a small logic that I can't seem to figure out here. My goal is to retrieve MySQL data from the database and echo it on a .php file. Before doing so, I need to check if the data is available. If it is, then I want to proce ...
I'm faced with a challenge involving a reusable React list component that supports nested children. My goal is to visually connect the parent div to its direct children using arrows, similar to the image linked below. View List Component Image Below ...
I have been utilizing tabs from the codrops Tab Styles Inspiration and I am looking for a way to open specific tabs using URLs. For instance, if I wanted to open tab3, I could link it as www.google.com/index#tab3. Below is the code I am currently using: ...
I am having trouble placing a fixed-action-btn inside a collapsible body. It keeps appearing in the bottom right corner of the page instead of within the collapsible itself. How can I ensure that the button stays inside the body? Check out this link for r ...
Is there a way to create visually appealing hexagon containers for text that work well across all window widths? Currently, the design is only satisfactory at certain window sizes. I am looking to implement a solution where specific code will be displayed ...
I am currently tackling a large website that has accumulated quite a bit of technical debt that needs to be addressed. The site contains a significant amount of JavaScript and CSS files being loaded. Currently, these files are aggregated and minified in la ...
I have implemented an accordion using "up" and "down" arrows. It works well, but when I click on the panel title again, the arrow does not change direction. Here is the issue: In my scenario, I have used "A" and "B" instead of the arrows. When the page l ...
In my website's footer, there is a form that I am trying to run using a PHP file located at 127.0.0.1/form.php on localhost. I learned that PHP code inside HTML is commented out, and according to the PHP Documentation, the PHP file needs to be run dir ...
I am trying to design a navigation bar that resembles the one depicted in the image provided. The concept involves creating a navigation bar where each border is separated from the others, potentially achieved using hr tags. However, I am struggling to fi ...
After clicking the download button, it should redirect to a new "thank you" webpage and then automatically start downloading a .csv file from the SD card after 2 seconds. However, instead of downloading the file, it is being displayed in the browser. Belo ...
Currently, I am working on creating a form with two input fields - one for text and the other for file upload. However, the issue I am facing is that the Browse button for the file input is being displayed inside the input box. My goal is to have the butto ...
My current situation involves creating several panels that are stacked side by side within a main container. Each panel takes up 100% of the viewport width and height. I want to be able to horizontally scroll to each panel when clicking on their respective ...
While my website looks fine on Chrome and Opera, it appears blurry on Internet Explorer and Firefox. I've tried researching and applying different CSS styles, but nothing seems to work. Both my Firefox and Internet Explorer versions are up to date, an ...