The CSS3 Transform feature kicks in only after the window is resized in Mozilla Firefox

I have created a pure CSS3 parallax webpage by following the method outlined by Keith Clark and using a sample made by Carl Henderson (I can't provide a direct link to his codepen due to my lack of reputation). You can find the code in the main page, on my JSFiddle, and also on Carl's Codepen.

index.html

<div class="plax_layer plax_layer--back">
    <p>Back Layer</p>
    </div>

    <div class="plax_layer plax_layer--base">
        <p>Base Layer</p>
    </div>

    <div class="plax_layer plax_layer--deep">
        <p>Deep Layer</p>
    </div>

</div>

main.css

html, body {
    height: 100%;
    overflow: hidden;
}
.parallax {
    top: 0;
    -webkit-perspective: 1px;
    -moz-perspective: 1px;
    -ms-perspective: 1px;
    perspective: 1px;
    height: 100vh;
   overflow-x: hidden;
}
.plax_layer {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   font-size: 200%;
   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -ms-transform-style: preserve-3d;
   -o-transform-style: preserve-3d;
   transform-style: preserve-3d;    
}
.plax_layer--base {
    -webkit-transform: translatez(0) scale(1);
    -moz-transform: translatez(0) scale(1);
    -ms-transform: translatez(0) scale(1);
    -o-transform: translatez(0) scale(1);
    transform: translatez(0) scale(1);
    border: 2px solid red;
}

.plax_layer--back {
    -webkit-transform: translatez(-1px) scale(2);
    -moz-transform: translatez(-1px) scale(2);
    -ms-transform: translatez(-1px) scale(2);
    -o-transform: translatez(-1px) scale(2);
    transform: translatez(-1px) scale(2);
    border: 2px solid blue;
}
.plax_layer--deep {
    -webkit-transform: translatez(-2px) scale(3);
    -moz-transform: translatez(-2px) scale(3);
    -ms-transform: translatez(-2px) scale(3);
    -o-transform: translatez(-2px) scale(3);
    transform: translatez(-2px) scale(3);
    border: 2px solid green;
}
p {
   position: absolute;
}

I'm facing an issue where the code works perfectly on Chrome and Safari, but Mozilla Firefox fails to display the desired effect unless I open the Inspector window (and stops when I close it). Additionally, it only works correctly in my Fiddle after I've resized the output window. So far, I haven't encountered similar problems with Google Chrome.

Answer №1

The issue was resolved when I included margin: 0 in the body CSS styling.

For more details, visit this link: http://example.com/css-fix.

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

Initially, the 'display none' CSS command may not take effect the first time it is used

I am currently working on a slideshow application using jquery.transit. My goal is to hide a photo after its display animation by setting the properties of display, transform, and translate to 'none' value. Although the slideshow application work ...

How can I make two lines equal in length by stretching them?

Looking to replicate the design shown in the image below using CSS: https://i.stack.imgur.com/cZiFT.png It's crucial for me that both lines are of equal length: https://i.stack.imgur.com/8phWR.png I attempted to recreate it with the following code ...

The custom CSS styling is triggered only when the page is resized in Bootstrap

Currently, I am utilizing bootstrap alongside my custom CSS. The issue I am facing is that some of the styling from my custom CSS only takes effect after resizing my browser window to a smaller size. My custom CSS seems to be applied when the website adapt ...

Conceal and reveal elements using a specific identifier with

Web Development Guide <ul id="menüü"> <li id="meist"> <p><a href="meist.html">Meist</a></p> </li> </ul> <div id="submenu"> <ul id="submeist"> ...

A guide to examining the HTTP response body, including HTML content, using Wireshark

After entering the URL in the address bar of the virtual machine's browser, a request for an HTML document from my host computer was made. The HTML document, which I had personally written, successfully appeared in the virtual machine's browser. ...

Guide on how to display matching options in an input box using HTML datalist based on user input at the beginning

I am a beginner in React and I am looking to create an autocomplete suggestion box for a text input field. I want the suggestions to only match the first letters of the available options, unlike the current behavior of HTML's <datalist>. Althou ...

"Creating multiple circles on an HTML5 canvas using an iPad: A step-by-step guide

My current code is only drawing one circle at a time on an iPad view, but I want to be able to draw multiple circles simultaneously. How can I achieve this? // Setting up touch events for drawing circles var canvas = document.getElementById('pain ...

Troubleshooting issues with Chrome browser and Datalist functionality in a Vue.js environment

Recently, I've encountered a performance issue with using datalists in vue.js specifically with Google Chrome (latest version: 83.0.4103.97). Admittedly, I'm still fairly new to Vue.js and am learning as I go. Interestingly, everything functions ...

Coordinates of HTML elements corners after rotation

Seeking to obtain the XY coordinates of an HTML element in order to accurately calculate the physical distance, in pixels, from the corners of a rotated element relative to another element. In this code snippet, I am attempting to determine the distance f ...

jquery selector targeting a select optiongroup that contains a specific label value

In my code, I have a select multiple with option groups: <select _ngcontent-oeq-14="" class="form-control" id="category-select" multiple=""> <optgroup label="grocery products"> <option>meat</option> <option>dai ...

Loading elements of a webpage in a consecutive order

I am currently working on implementing a content slider within my Django application. The specific slider that I am using can be found at this link. One challenge that I am facing is the need to load close to one hundred 'contentDiv' pages, and I ...

What is the best way to eliminate the input border?

click here for image I'm currently working on designing a straightforward login page. However, I've noticed that there are black borders around the input fields. Can anyone help with how to remove these borders? ...

Verifying the visibility status of a div and toggling a class based on it

I'm facing a challenge with multiple checkboxes in a row. When a button is clicked, it displays a div (#locale_container), and flips a small arrow by adding a rotated class. However, I only want the arrow to flip when the div is being shown or hidden ...

What is the reason for the columns being divided on the xs-viewport in Bootstrap?

Attempting to grasp the concepts of Bootstrap has left me puzzled, as I cannot comprehend why the col-xs-11 is not aligning correctly with the col-xs-1. Despite having a total of 12 columns, the layout seems off. CSS: [class^="col-"] { height: 20px; ...

Position the caret after adding a new element in a content-editable div

I have a contenteditable div that contains various elements. My goal is to automatically create a new paragraph tag right after the element where the cursor is positioned when the user presses the enter key. Currently, I am able to insert the paragraph tag ...

"Unusual HTML and jQuery quirk causing a perplexing issue: a function that keeps looping inexp

A unique code written in javascript using jQuery allows users to create a "box" on a website with each click of a button, triggering an alert message upon clicking the box. The process is as follows: 1) Clicking the "Add (#addBox)" button appends a new li ...

Ways to tally elements that have been dynamically loaded onto the webpage through AJAX requests

My page has a dynamic region that is continuously updated using jQuery's .ajax and .load methods. In order to submit the form, there need to be at least 3 of these 'regions', so I have to keep track of the number of DIVs with a specific cla ...

The CSS code ".btn btn-primary * { visibility: hidden; } is failing to work as intended

Trying to hide specific buttons for print using CSS, but it doesn't seem to be working. Here is the code snippet: .btn btn-primary * { visibility: hidden; } <div id="control" style="display: none"> <button class="bt ...

Is there a way to transfer the data from a `HtmlService.createHtmlOutput()` to a variable after clicking the `submit` button event?

The code snippet below is encountering an issue where arrayStored is not defined in the submit function. I attempted to retrieve the value of arrayStored using the e.parameter method, but it did not work as expected. As a newcomer to HtmlService, I am cu ...

Tips for vertically aligning <p> and <div> elements without using the table-cell property

I am trying to align my text vertically in the middle using a ch-grid <div> (the circle color element). Is it possible to achieve this without specifying a display attribute for the <p> element? I plan to hide it by setting display:none initia ...