Error in viewpoint/transformation transition on Microsoft Edge

Encountering a peculiar issue with MS Edge involving the animation of a door (a div tag) around the Y axis using the css rotateY() function in combination with perspective properties. The problem arises when transitioning an angle from a positive value to a negative value (50deg => -100deg), causing a glitch near zero.

For a simplified version of the code, visit: https://codepen.io/stephanemill/pen/LYGowqo - Microsoft Edge 44.18362.449.0

.wrapper {
    margin-left: 200px;
    perspective: 500px;
   perspective-origin: 0% 0%;
  }
  
  .flip {
    width: 100px;
    height: 200px;
    background: gold;  
    transition: transform 4s;
    transform-origin: 0px 0px;
    transform: rotateY(50deg);
  }
  
  .flip:hover {
    transform: rotateY(-100deg);  
  }

The glitch may not be easily noticeable but can become more pronounced based on the context.

After extensive testing, it has been identified that:

  • -the issue is not related to hover effects
  • -the bug disappears when removing perspective properties
  • -the bug disappears when interpolating from -3deg to -100deg

Answer №1

When testing in Edge Legacy, I noticed an issue with the door appearing jerky during transformation. This could be a result of using different rendering engines in various browsers.

To fix this problem, consider utilizing the CSS transform perspective() function instead of the CSS perspective property. Below is a sample code snippet:

.wrapper {
  margin-left: 200px;
  /*perspective: 500px;*/
  perspective-origin: 0% 0%;
}

.flip {
  width: 100px;
  height: 200px;
  background: gold;
  transition: transform 4s;
  transform-origin: 0px 0px;
  transform: perspective(500px) rotateY(10deg);
}

.flip:hover {
  transform: perspective(500px) rotateY(-100deg);
}
<div class="wrapper">
  <div class="flip">
  </div>
</div>

This solution has been successful in Edge Legacy. Feel free to check out the result here:

https://i.sstatic.net/ee868.gif

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

Padding located within a div tag

As a novice in the world of HTML and CSS, I have designed a birthday card with a desired 50/50 split down the center. Placing an image on the left side was successful, however when trying to add text to the right, it ended up too close to the center line. ...

I designed my radio buttons to ensure they cannot be selected multiple times

I have developed a basic React custom controlled radio button: export const Radio: FC<RadioProps> = ({ label, checked, onChange, disabled, }) => { const id = useId(); return ( <div> <label htmlFor={id} ...

Enhance video playback by eliminating accidental scrolling through the space bar

When using a video player, I always prefer to pause it by pressing the spacebar. However, this function is not working as expected. The issue at hand is that instead of pausing the video, pressing the space bar causes the page to scroll down unexpectedly ...

Issue with displaying personalized radio buttons

I added a custom radio button, but it's not showing up. It seems to work when arranged like this: <label> <input type="radio" name="gender" /> <span>Female</span> </label> Why isn't it working? Is there somethin ...

What is the best way to position a button to the right side of the screen?

Is there a way to align a button to the right of a page? I attempted using text-align: right; and align-content: right; In addition, I want the button to utilize display: flex; #hideShow { display: flex; text-align: right; align-content: right; ...

Angular JS effectively prevents redundant data from being displayed to users when scrolling infinitely while also efficiently removing DOM elements for previous data

I'm currently working on implementing AngularJS Infinite Scroll without using jQuery. My goal is to display the first 3 data items when the page loads and then load the next 3 data items from a JSON array object as the user scrolls. The issue I am fac ...

How can one make the image pop and stand out from its background?

I am trying to achieve a similar effect as shown in this design where the image stands out from its background. I have managed to do that, but I am struggling with aligning the image to the center and bottom with overflow. Can anyone help me with this? Th ...

Retrieve the 'computed' CSS for the entire webpage

We operate multiple websites, each referencing 3-5 CSS files. Some of these files are shared across sites while others are specific to certain pages. Our aim is to streamline the CSS structure by consolidating into fewer files without altering the end res ...

Customize div styles according to the website domain

I want to dynamically change the header of my website based on whether it is in dev QA or production environment. Below is the HTML code: <div id="wrapper"> <form id="form1" runat="server"> <div class="wrapper"> <div> ...

Place each label and input element on a separate line without using div tags

Can we separate form elements onto individual lines without enclosing them within divs? For example: <label for="one">One:</label> <input type="text" id="one"> <label for="two">Two:</label> <select id="two"> ...

Stack pictures on a slender DIV

I am trying to create a vertical line inside a DIV container. After that, I want to add an image on top of the vertical line (see attached picture for reference). This is what my current source code looks like: <div style="background-color:gray;width ...

Error: Unable to change image -- TypeError: Cannot assign value to null property 'src'

As I work my way through the textbook for one of my classes, I am practicing by building an image swapping page. The concept is simple - clicking on a thumbnail swaps out the main image and enlarges it as if it were linking to another web page. Despite fol ...

Vuetify's offset feature seems to be malfunctioning as it does not

I'm facing an issue with the <v-flex> element in my code, specifically with the offset property not responding as expected. Despite following the recommended layout from the vuetify docs, I can't seem to get it right. Below you can see the ...

Use CSS Grid to anchor the final element to the right side of a horizontal navigation menu

I am facing an issue with my horizontal navigation bar that contains a dynamic number of links. In this specific case, there are 3 links displayed below: My goal is to keep the first two links in their original position and move the third link all the way ...

Looking to achieve a mouse over effect in jQuery?

For the past few days, I've been grappling with a question that I just can't seem to find the right answer to. I'm trying to create a mouseover effect similar to the one on this template (the Buddha at the top of the page). Despite my best e ...

Craft a stunning transparent border effect using CSS

I am trying to achieve a unique border effect for an element using CSS, where the transparency is maintained against the background: This is the desired outcome: https://i.stack.imgur.com/6Z1MU.png However, the border I am currently able to create looks ...

Change the text color of the Vuetify button to customize its appearance

Is there a way to change the default active color for button text in a toolbar using CSS? v-btn(:to="item.path" active-class="v-btn--active toolbar-btn-active") {{item.meta.title}} I attempted to override it with this custom class: .toolbar-btn-active { ...

changing the css transformation into zoom and positioning

My goal is to incorporate pinch zoom and panning using hardware-accelerated CSS properties like transform: translate3d() scale3d(). After completing the gesture, I reset the transform and switch to CSS zoom along with absolute positioning. This method ensu ...

Positioning the Submenu in Elementor Site

I've been working on creating a vertical navigation menu with a horizontal submenu for my website using Elementor. While I've made some progress, I'm struggling to position the submenu correctly. My goal is to have the submenu display next t ...

Step-by-step guide to creating a border around text with a number included in between the lines

Is there a way to replicate the appearance of the image shown below using CSS, Bootstrap, or other client-side methods? ...