IE11 - border-radius et box-shadow ensemble causer des problèmes

Après mon code:IE11 - border-radius et box-shadow ensemble causer des problèmes

div{ 
 
    display: block; 
 
    width: 500px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
    border-radius: 5px; 
 
    transition: box-shadow 1s; 
 
} 
 

 
div:hover{ 
 
    box-shadow: 25px 25px 0px #000; 
 
}

<div>Test</div>

Il fonctionne sur Chrome, Safari et Firefox, mais il ne fonctionne pas bien sur Internet Explorer 11 , il y a des problèmes visuels évidents quand le div n'est plus focalisé. Comment les résoudre?

jsFiddle: https://jsfiddle.net/aL0t8g21/

Source

2017-09-13 Bob

Comment allez-vous tester IE11? IE10, 11 et Edge me ressemblent tous comme Chrome. –

@JenniferMichelle Je peux voir d'étranges artefacts en planant le div, comme Bob le décrit. Il me semble comme un problème avec le moteur de rendu de IE, donc je crois qu'il est difficile à résoudre. Vous pouvez essayer d'utiliser une solution de contournement JS pour l'animation d'ombre, même si cela peut être un peu trop pour une solution IE pure –

Oui, j'ai également essayé de le résoudre Je suis d'accord avec @MatthiasS. c'est un ** problème avec le moteur de rendu de IE **, si vous voulez, je peux créer une solution de contournement pour vous en utilisant ': after' ou': avant' de vous div. – weBBer

Mise à jour pour le rendre peu mieux.

Comme votre demande de commentaires, voici une solution pour vous en utilisant :after ou :before de vous div.

div { 
 
    display: block; 
 
    width: 500px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
    border-radius: 5px; 
 
    transition: box-shadow 1s; 
 
    position: relative; 
 
    background: #fff; 
 
} 
 

 
div:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    width: 500px; 
 
    height: 200px; 
 
    border-radius: 5px; 
 
    background: #000; 
 
    left: 0; 
 
    top: 0; 
 
    opacity: 0; 
 
    transition: all 1s ease-in-out; 
 
    z-index: -1; 
 
} 
 

 
div:hover:after { 
 
    left: 25px; 
 
    top: 25px; 
 
    opacity: 1; 
 
}

<div>Test</div>

jsfiddle

Cela fonctionne bien dans IE 11.

Source

2017-09-13 13:05:26 weBBer

IE11 - border-radius et box-shadow ensemble causer des problèmes

Répondre

Questions connexes