An unusual visual glitch is spotted in a complex parallax image with multiple layers

Currently, I am working on a section featuring a parallax scrolling effect with multiple layers of PNG images.

Check it out here:

As you scroll down the page, you can observe a cool 3D effect.

Users on Chrome, Opera, or Edge browsers may notice a graphical issue at the bottom of the image while scrolling. A rectangular hole appears, partially obstructing the image's bottom. Interestingly, this issue does not occur on Firefox.

The image was crafted using HTML and CSS, with multiple layers created by cutting out components from the original landscape image using Photoshop.

Below is the code used to create the parallax image:

<section
    class = "sectionStyle"
>
    <header class="header">
        <img src={Layer1} alt = "layer1" class ="layer1Style" />
        <img src={Layer2} alt = "layer2" class ="layer2Style" />
        <img src={Layer3} alt = "layer3" class ="layer3Style" />
        <img src={Layer4} alt = "layer4" class ="layer4Style" />
        <img src={Layer5} alt = "layer5" class ="layer5Style" />
        <h1
            class="text-center text-2xl font-bold"
        >Welcome!</h1>
    </header>
    <div class = "bg-black h-fit text-white text-base py-10 ">
        <div
            class="w-11/12 mx-auto"
        >
            <p>//written content</p>
//skip
        </div>
    </div>
</section>

You can find this on the following Github page: https://github.com/Albertyhu/tutorial/blob/main/src/components/parallaxHero.astro

The stylesheet used to style and create the parallax effect is available here:

https://github.com/Albertyhu/tutorial/blob/main/src/styles/parallaxHeroStyle.css

I would greatly appreciate any assistance from those who might have insights into what is causing the rectangular hole to appear at the bottom of the parallax image while scrolling.

Edit: I have also created another page featuring a parallax image, using the same HTML markup and CSS styling as the previous one. Unfortunately, it exhibits the same issue with the rectangular hole when viewed on Chrome, Opera, and Edge:

View it here:

Answer №1

Through some investigation, I discovered that the problem was caused by the oversized file sizes of the images. After reducing the sizes of all layers, the visual distortion disappeared completely.

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

splitting lengthy words into several lines

Does anyone know how to break words like the examples below using CSS or jQuery? SAMPLE 1 ConfigTechnologyHormonyAppComponentBackOfficeLaunch It needs to be broken into ConfigTechnologyHo rmonyAppComponentB ackOfficeLaunch SAMPLE 2 WorkAppComponentBa ...

Changing the height of a pseudo element according to the width of the viewport in a dynamic way

Currently, I am utilizing the :before pseudo-element on a 100% width div to create a curved top, which is functioning correctly. However, I am facing the issue of adjusting the height of the :before element through media queries whenever the browser width ...

Is there a way to retrieve just the parent's value?

<div class="island biz-owner-reply clearfix"> <div class="biz-owner-reply-header arrange arrange--6"> <div class="arrange_unit biz-owner-reply-photo"> <div class="photo-box pb-30s"> <a hre ...

Struggling to display the retrieved data on the webpage

Code in pages/index.js import React from 'react'; import axios from 'axios'; import ListProducts from '@/components/products/ListProducts'; const getProducts = async () => { const data = await axios.get(`${process.env.AP ...

Positives and negatives images for accordion menu

I have successfully created an accordion list using HTML, CSS, and JavaScript. However, I would like to enhance it by adding a plus and minus picture in the left corner of the heading. Is there a way to achieve this functionality? I have two images that I ...

How to efficiently highlight a row in a table when hovering over one of its cells, utilizing the React hook useState

I have a table displaying a list with three columns: item, delete-button-1, delete-button-2. When hovering over a delete button, the corresponding item is highlighted in red. Utilizing React Hook useState to store the index of the row where the delete bu ...

The compiler throwing an error claiming that the indexOf method is not a valid

Currently, I am working on a simple form that collects user input and aims to validate the email field by checking for the presence of "@" and "." symbols. However, every time I attempt to run it, an error message stating that indexOf is not a function p ...

Create a Bootstrap layout with three columns and three rows, where the third column has a height

I am trying to achieve a specific layout using the col-lg-4 class. My main goal is to make the third column span across all three rows without creating excessive white space between them. The current layout looks like this: Is it possible to do this in B ...

Deactivating a widget on one of my web pages

I'm looking to disable a widget on certain pages. Does anyone know how to do this? One idea I had was to add a condition in the HTML (using Django or PHP?) of the widget that would make it only appear if the site URL is not the one where I don't ...

The placeholder text is not displaying with bullets in Internet Explorer. However, it is functioning correctly in Chrome

I need assistance displaying the placeholder text in IE8 as shown below: "Any relevant reference numbers, such as Direct Debits: - Name of the Branch (if applicable) - What was the original problem - Date the problem occurred " While it appears correct ...

Ensure that all elements are consistently kept within a DIV container

In my experience with web development, one recurring challenge is ensuring that everything stays contained within a div element. I often encounter situations where multiple nested divs and content cause styling nightmares when elements bleed out of their d ...

Introducing a fresh new feature incorporating various div elements through the power of JQuery

Why am I unable to retrieve the text of the newly added child divs? I am using JQuery to dynamically add these elements. Here is my sample fiddle: JSFIDDLE Could someone please guide me on what mistake I made? Javascript Code: var counter = 0; $("butto ...

Is it possible to customize the appearance of individual sections in an HTML5 range slider by changing their

I'm looking to customize a stepped HTML5 range slider by changing the background color for each step, similar to the image provided. Is this customization achievable? ...

ArrayObservable causing issue with Knockout's checked binding functionality

I am encountering an issue with my observableArray that is bound to a pair of checkboxes. Despite following the documentation, the array is not changing as expected. Special note: If your parameter resolves to an array, KnockoutJS will check the element i ...

The magic of CSS's 3D Transformation feature

Currently, I am working on a 'Flip' effect using the CSS3 transform Property. While everything seems to be functioning properly in recent versions of Chrome, Firefox, and Safari, I'm facing challenges when it comes to creating a fallback fo ...

Transferring the final space from a node containing a mixture of content to a separate

Having a multitude of HTML files generated by MS Word, my objective is to modify the contents in order to extract data and perform other tasks. In an HTML paragraph with mixed content, I have noticed that spaces after italicized or bold words also become ...

A universal setting takes precedence over Vuetify divider colors

Since upgrading Vuetify from version 1.1.9 to 1.2.3, I have encountered a strange issue where all of my dividers appear much darker than before and different from the examples in the documentation. This is how it should look: https://i.sstatic.net/GnxzV. ...

Struggling to remove the translucent effect when hovering over the share button

I have been struggling with a seemingly simple issue for a few hours now. On my website, I have some share buttons located at . Although I want these buttons to remain completely black when hovered over, they are inexplicably becoming slightly transparen ...

Show a message notifying the user of an incorrect password input

Hey there, currently I have a script set up which logs into live.com in this manner: WebBrowser1.Document.GetElementById("login").SetAttribute("value", txtUsername.Text) WebBrowser1.Document.GetElementById("passwd").SetAttribute("value", txtPass ...

Manipulating binary data through the use of encodeURIComponent

Currently, I am reading a binary file by making a jQuery ajax get request. The file (a zip file in this instance) is returned as a string. After performing some actions on the file within the browser without modifying it, I need to send it back to a server ...