Experience the power of Microsoft Edge in a dynamic vertical format with seamless transitions

I've run into a frustrating issue with Microsoft Edge and CSS while tackling a step-by-step form with vertical transitions. All steps are set to position: absolute. The parent container holding the steps has a position: relative.

The current step is centered on the screen. As each subsequent step is revealed, it "pushes" the current step up by setting its position to bottom: -100%. Meanwhile, the previous step moves out of view towards the top by having top: -100%.

In Microsoft Edge, the first two steps function correctly. However, upon reaching the third step, the bottom: -100% suddenly behaves as if it's been set to bottom: 0px. This causes all steps to stack at the bottom of the screen, making the form look messy and unusable.

Interestingly, I don't encounter this issue in Chrome or Firefox. Could there be some specific behavior in Edge related to elements with a position: absolute property that I need to be aware of?

Here's a diagram illustrating how other browsers handle the layout seamlessly:

csscss-transitionsmicrosoft-edge

Answer №1

Consider utilizing a different unit of measurement instead of percent, for example:

Top: 100vh;

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

What methods can be utilized to ensure that my wistia video player/playlist is responsive on different devices

I need some assistance with making my Wistia player responsive while using a playlist. I want the video player to adjust its size based on the screen size. Here is an example: My current code utilizes their iframe implementation: <div id="wistia_1n649 ...

javascriptjquerycsshtml5-videovideo-player

Personalized Bootstrap 4 grid system

Could someone guide me on how to create this grid layout with Bootstrap 4? I am trying to achieve a design where one column stretches from the edge of the window to the inside, while the other column is half the width of a standard .container element. ht ...

cssbootstrap-4grid

What are some ways to achieve a smooth rotation of an icon?

Does anyone know why I am unable to smoothly rotate the icon? Any help would be greatly appreciated! <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> ...

jqueryhtmlcss

Scroll to Reveal Content Hidden Behind Hero Image

I am absolutely enamored with the Beautiful Stories section on Medium's website. The way they showcase their content is just mesmerizing. One thing I've noticed is how the cover image and preview of the content changes as you resize your browser ...

javascriptjquerycssresponsive-design

"Implemented a user-friendly header and footer that stick to the top and

My goal is to create a fixed header and footer, allowing the main content to scroll underneath while keeping the right navigation in place. To achieve this effect, I've been experimenting with different solutions. One of my attempts can be viewed her ...

jquerycss

Maintaining the active status of section 1 after the page is refreshed using Javascript and CSS

I have a total of 3 buttons and 3 hidden sections available, which can be seen in the image below: click here for image description Whenever one of the buttons is clicked, the respective section transitions from being hidden to becoming visible: click he ...

javascripthtmlcss

Synchronizing two navigation menus on a single-page application website

Let me start by saying that I specialize in back end development and am facing a specific challenge with building a website that includes two navigation menus. The main navigation menu features links like Home, while the sub-navigation menu includes option ...

javascriptjquerycssangularjstwitter-bootstrap

The Bootstrap 4 Navbar features a logo aligned to the left and a menu positioned to the right on desktop screens, while on mobile

I'm currently struggling to position my logo and menu correctly on desktop. I want to display my logo on the left and menu on the right, and on mobile I want the logo to be on top and the menu centered. Here's my code: <nav class="navbar navb ...

htmlcssbootstrap-4navbar

"Div vanishes mysteriously while CSS transition is in progress

When I have two divs positioned alongside each other, and one collapses to the left upon clicking a button, the remaining div on the right fills the available space due to its width being set at 100%. However, during the collapsing transition, the right di ...

htmlcssbootstrap-4

Issue with cursor behavior in contenteditable field on Chrome

Recently, I encountered an issue where the cursor would jump to the wrong place when a user clicked inside a contenteditable div, but not directly on the text. This problem seems to be isolated to newer versions of Chrome and Opera. Interestingly, when I t ...

htmlcssgoogle-chromecontenteditableblink

Does the responsive navigation vanish when the size is changed?

I've encountered a glitch with my responsive drop-down navigation that's affecting its functionality. Here's the scenario: when the page loads, everything works fine. But if I resize the page to reveal the mobile nav (hamburger menu), it be ...

jqueryhtmlcssresponsive-design

Repair the navigation bar once it reaches the top of the screen using ReactJS

I have a webpage that contains specific content followed by a bar with tabs. My goal is to have this bar stay fixed at the top of the screen once it reaches that position while scrolling down, and only allow the content below the fixed bar to continue scro ...

javascripthtmlcssreactjstailwind-css

Is there a specific Selenium WebDriver designed for the Microsoft Edge browser?

Just announced as the default browser for Windows 10 is "Microsoft Edge." Is there a new Selenium WebDriver available for this browser yet? If not, any hints on when we might see one developed? Considering the technical preview of Windows 10 is already o ...

seleniumselenium-webdriverwebdrivermicrosoft-edgeselenium-edgedriver

Stick Table Column to Top Using Bootstrap Framework

Is it possible to keep the content of column one at the top regardless of the amount of text lines in the other column? Currently, my layout looks like this: but I would like the poster's info to stay at the top, like this: so that no matter how mu ...

htmlcsstwitter-bootstrap

Employing an odd/even toggle for assigning class names

I need each this.state.title to be aligned based on a different classname. I attempted using css flex boxes/nth-of-type/nth-child, but it didn't work well with React. I'm utilizing this.state to access my objects. My failed strategy render: f ...

javascriptcssreactjs

Challenges arising from utilizing distinct list style types for both parent and child elements with the assistance of CSS List

I am experimenting with the CSS counter reset feature to create a numbering system on my website. The main list should be in regular decimal format (e.g. 1, 2, 3, 4) while the sub-list should be in upper Roman numerals (e.g. I, II, III, IV, etc). Below is ...

htmlcsscss-counter

Utilize the design elements stored in the database within Django

I have a style stored in my database and I want to use it in a template, but I'm not sure how to do it. models.py class Post(models.Model): # ... body = models.TextField() # HTML style = models.TextField() # CSS # ... views.py ( ...

pythoncssdjango

Tips for positioning a badge alongside the final line of a multi-line header element?

Is there a way to vertically align a smaller badge next to the h1 tag, without placing the span tag inside the h1 tag for SEO reasons? Currently, the badge is aligned at the bottom, but I would like it to be in the middle. <link href="https://cdn. ...

cssbootstrap-4vertical-alignmentbadge

Create a dynamic Bootstrap progress bar that smoothly transitions from 0 to 100%

I am currently utilizing Twitter Bootstrap to construct my webpage. Here is the snippet of HTML code I have: <div class="btn-group"> <button type="button" class="btn btn-success">Connect</button> <button type="button" class=" ...

javascriptjqueryhtmlcsstwitter-bootstrap

Create a single line of content for a carousel display

Seeking a solution where I can have a container that slides sideways without stacking in rows, I have exhaustively searched for answers using different keywords like single row, inline, flexbox, and grid but to no avail. Any assistance will be highly appre ...

javascriptcssinline