A sporadic glitch in IE10 appears while attempting to translate text with a border-radius feature

I need some advice regarding a rendering issue I am experiencing in IE10. I have created an animated-flip effect that works perfectly in all the browsers I need it to. However, during testing, I noticed random border-like lines appearing for no apparent reason. These lines do not seem to be actual borders, outlines, or shadows. It appears that the child elements, such as the anchor in the example, are not being rendered correctly.

I am aware that a similar issue can occur in mobile Safari, where people use margin-whatever: -1 to fix it, but that solution does not seem to work here.

I have simplified the example to the minimum required to replicate the bug. Removing any of these styles seems to resolve the issue:

perspective: 2000px;              // Removing this makes the animation look bad
border-radius: 6px;               // Removing this changes the appearance of the modal
-ms-transform: rotateY(0); 
transition: all 0.4s ease-in-out;

DEMO

htmlcssanimation

Answer №1

Let me provide an example for you

body {
  background: #555;  
}
.pt, .front {
  width: 100px;
}
.pt {
  margin: 0 auto;

}
.front {
  position: absolute;
  background: #FFF;
  padding: 20px;
  transform: scale(0.8) scaleZ(1.0) rotateX(9deg) rotateY(9deg);
  transform-origin: 0% 0%;
  perspective: 200;
  perspective-origin: 50% 50%;
  -webkit-transform: scale(0.8) scaleZ(1.0) rotateX(9deg) rotateY(9deg);
  -webkit-transform-origin: 0% 0%;
  -webkit-perspective: 200;
  -webkit-perspective-origin: 50% 50%;
  -moz-transform: scale(0.8) scaleZ(1.0) rotateX(9deg) rotateY(9deg);
  -moz-transform-origin: 0% 0%;
  -moz-perspective: 200;
  -moz-perspective-origin: 50% 50%;
  -o-transform: scale(0.8) scaleZ(1.0) rotateX(9deg) rotateY(9deg);
  -o-transform-origin: 0% 0%;
  -o-perspective: 200;
  -o-perspective-origin: 50% 50%;
  -ms-transform: scale(0.8) scaleZ(1.0) rotateX(9deg) rotateY(9deg);
  -ms-transform-origin: 0% 0%;
  -ms-perspective: 200;
  -ms-perspective-origin: 50% 50%;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  border-radius: 6px 6px 6px 6px;
  -moz-border-radius: 6px 6px 6px 6px;
  -webkit-border-radius: 6px 6px 6px 6px;
}

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

Deactivate event handling for viewport widths below a specified threshold

Currently, I am attempting to deactivate a script when the width of the window falls below 700px. Despite reviewing suggestions from various sources, I have not been successful so far. window.onresize = function () { if(window.innerWidth < 700) { ...

javascriptjquerycssevent-handling

Importing text data from a text file in Java or jQuery without the need for a web server

I've attempted to utilize both the jQuery.Get() and $.Get() methods for this task, but they don't seem to be working as expected. <head> <script type="text/javascript" src="jquery-2.1.3.min.js" > </script> <script lang ...

javajavascriptjqueryhtml

Transferring information from an HTML form to a C# webservice through AJAX

I've created a form in HTML using Bootstrap within PHPStorm, and now I want to send the information to a C# webservice using AJAX. However, I'm unsure about what to include in the AJAX URL section (shown below). Here is the HTML/Bootstrap form I ...

c#jqueryhtmlajaxweb-services

Breaking up phrases into separate lines (Bootstrap 4 + Mobile)

On my website, I currently have a sentence that is fully displayed on the Desktop version. However, I am looking to modify it so that it breaks into 2-3 lines when viewed on Mobile using Bootstrap-4. For example, here is the text in question: Our large, ...

htmlcssbootstrap-4

Resetting the width of a CSS-styled div to its default maximum width

I have a set of automatically generated div containers that contain label and data information. For example: <div class="display-label"> @Html.DisplayNameFor(model => model.BusinessPhone) </div> <div class="display-field"> @H ...

htmlcss

Creating a dual style name within a single component using Styled Components

Need assistance with implementing this code using styled components or CSS for transitions. The code from style.css: .slide { opacity: 0; transition-duration: 1s ease; } .slide.active { opacity: 1; transition-duration: 1s; transform: scale(1.08 ...

cssreactjstypescriptnext.jsstyled-components

Having trouble interacting with Bootstrap modal dialog when fullPage.js is active

Whenever I attempt to click on the button, a Bootstrap modal dialog box appears but remains unresponsive no matter what I try. My project utilizes both Bootstrap and fullPage.js http://codepen.io/anon/pen/obEOzO <body> <div id="fullpage"> &l ...

javascriptjquerycsstwitter-bootstrapfullpage.js

A guide on dynamically adjusting image size in ReactJS

Here is the structure I have: img { width: auto; height: 200px; } .cards { display: flex; justify-content: center; margin-top: 2em; width: 80%; flex-wrap: wrap; } .card { margin: 1em; box-shadow: 0 0 6px #000; ...

htmlcss

Shifting a static-width table within a predetermined width container

Unable to modify the HTML code for this project, I am in need of a CSS-only solution. Dealing with an unpleasant HTML structure that is causing some issues. A side by side comparison on fiddle shows where I'm currently at in the process. The challeng ...

htmlcss

Issues encountered when using Vue Transition in conjunction with v-autocomplete

Attempting to conditionally display or hide a selection text field using Vue's Transition feature, but experiencing an issue where the text field appears and disappears without any transition effect. <template> <Transition v-if="is ...

cssvue.jsvuejs3vuetify.js

Tips for implementing Animation.css in Angular version 1.5.8

I have successfully added the ngAnimate dependency to my AngularJS project: var app=angular.module('testApp',['ngRoute', 'ngAnimate']); I have also included the animation classes in my animation.css file: .slide-animation.n ...

javascriptcssangularjsanimationcss-animations

The navigation bar vanishes when a picture is inserted below it

I encountered an unusual issue on my webpage. Everything was going smoothly with my navigation bar, even for mobile phones. However, as soon as I added a photo below the navigation bar, it disappeared... I'd like to keep the navigation bar visible, ...

htmlcssbackground-imagenavigationbarjquery-mobile-navbar

display/hide a div within a separate container

Greetings, I am seeking assistance in understanding why the second tab button is not functioning properly. I am attempting to create a layout with a wrapper div, a left side div containing label buttons, and a right side div for displaying content. When I ...

htmlcssnested

What are some ways to streamline inline styling without having to create numerous variables?

Currently, I am in the process of constructing a tab component and establishing inline variables for CSS styling. This particular project involves a streamlit app that allows me to modify settings on the Python side. At the moment, there are four elements ...

cssreactjstypescriptstreamlit

What is the best way to ensure that the background of my sticky table th stays in place and does not scroll away

I have a dynamic table where the table body rows are loaded dynamically. The wrapper uses Bootstrap5's overflow-scroll feature to keep the table at a fixed height and scroll if there are too many rows. I managed to make the table head sticky, but had ...

htmlcssbootstrap-5

I am attempting to create basic animations using css, but I'm having some trouble

Currently, I am attempting to add animation to a css div without including the top property in the original div style. I omitted it because I wanted to delay the animation, so I placed it within the @keyframes property. However, the element disappears afte ...

htmlcssreactjsanimation

Is there a translation issue affecting Chrome version 44?

Recently, Chrome 44 (44.0.2403.89 m) was released and I've encountered some issues with the translate3d feature (on both Mac and Windows versions). This problem is impacting plugins such as fullPage.js and consequently affecting numerous pages at th ...

javascriptjquerycssgoogle-chrome

Is it possible to customize the font color of a placeholder in a v-text-field component in Vue?

Recently, I added the following code snippet to my project: <v-text-field hide-details class="search-field" id="name-input" placeholder="Search by name" v-model="search"></v-text-field> I wanted to change the font color of the placeholder tex ...

javascripthtmlcssvue.jsvuetify.js

Navigating through dropdown menus using webdriver

I am having trouble selecting a specific element from a dropdown menu. The element I am trying to select is labeled Edit/ViewResume 1st Attempt For my initial try, I attempted to use the Action and Select class methods to choose the desired webelement ...

javahtmlseleniumdrop-down-menuselenium-webdriver

The form continues to submit even if the validation process fails

I am facing an issue where my form still submits to the controller even if the validation fails. Here's my jQuery code: $(document).ready(function () { $('#commentForm').validate(); }); $(function () { $('#commentForm&ap ...

jqueryhtml