Warum ist mein interaktives Bild auf NUR Internet Explorer störend?

Mein Problem: Ich habe mir ein Image-Map/interaktives Bild der Art gemacht und es funktioniert perfekt auf Chrome, Safari und Firefox. Allerdings, wenn ich es auf dem gefürchteten Internet Explorer versuche, ist es wirklich störend. Die kleinen Punkte sollen in größere Kisten expandieren, im Internet Explorer funktioniert es entweder nicht oder versaut sich dabei.Warum ist mein interaktives Bild auf NUR Internet Explorer störend?

Siehe das Problem: Sehen Sie diese Fiddle, dieses website Siehe für eine bessere Idee (mein Code ist hier aktiv).

Welcher Teil meines Codes könnte dazu führen, dass es auf IE zu versauen? Jede Hilfe würde sehr geschätzt werden!

HTML und CSS:

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
<link href='//fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700' rel='stylesheet' type='text/css'> 
<link href='//fonts.googleapis.com/css?family=Roboto:100,300,400,700,900' rel='stylesheet' type='text/css'> 
<style> 
html 
    color: #e5e5e5; 
    text-align: center; 
    font-family: "Roboto", Helvetica, sans-serif; 
} 

body { 
    max-width: 1200px; 
    margin: 20px auto; 
    padding: 0 100px; 
    overflow-x: hidden; 
} 

.description { 
    max-width: 600px; 
    margin: 0 auto; 
    color: rgba(229, 229, 229, 0.7); 
} 

div, img, footer { 
    position: relative; 
    box-sizing: border-box; 
} 

h1, h2, h3, h4, h5, h6 { 
    margin-bottom: 20px; 
    text-transform: uppercase; 
    font-family: "Roboto Condensed", Helvetica, sans-serif; 
    font-weight: 300; 
} 

h1 { 
    font-size: 36pt; 
} 

h2 { 
    font-size: 24pt; 
} 

h3 { 
    font-size: 18pt; 
} 

h4 { 
    font-size: 16pt; 
} 

h5 { 
    font-size: 14pt; 
} 

h6 { 
    font-size: 12pt; 
} 

p { 
    font-size: 12pt; 
    margin-bottom: 12pt; 
    margin-right: 12px; 
    margin-left: 12px; 

} 

strong { 
    font-weight: 900; 
    font-family: "Roboto Condensed", Helvetica, sans-serif; 
    color: #e5e5e5; 
} 

a { 
    -webkit-transition: color 0.25s ease-in-out; 
    transition: color 0.25s ease-in-out; 
    font-family: "Roboto Condensed", Helvetica, sans-serif; 
    text-transform: uppercase; 
    text-decoration: none; 
    color: #dff3fd; 
} 
a:visited { 
    color: #dff3fd; 
} 
li.active a, a:hover, a:active { 
    color: #e5e5e5; 
} 

.centered { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -50px; 
    margin-left: -100px; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
} 

.centered-y { 
    position: inline-block; 
    width: auto; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    transform: translateY(-50%); 
} 

.distribution-map { 
    position: relative; 
    width: 1190px; 
    padding: 20px; 
    box-sizing: border-box; 
    margin: 0 auto; 
} 
.distribution-map > img { 
    width: 100%; 
    position: relative; 
    margin: 0; 
    padding: 0; 
} 
.distribution-map .map-point { 
    cursor: pointer; 
    outline: none; 
    z-index: 0; 
    position: absolute; 
    width: 40px; 
    height: 40px; 
    border-radius: 20px; 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); 
    opacity: 0.8; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
    -moz-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s; 
    -o-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s; 
    -webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out, z-index 0.25s ease-in-out; 
    -webkit-transition-delay: 0.25s, 0.25s, 0.25s, 0.25s; 
    -webkit-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s; 
    transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s; 
    background: rgba(26, 26, 26, 0.85); 
    border: 3px solid #dff3fd; 
} 
.distribution-map .map-point .content { 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 
    opacity: 0; 
    -webkit-transition: opacity 0.25s ease-in-out; 
    transition: opacity 0.25s ease-in-out; 
    width: 100%; 
    height: 100%; 
    left: 50%; 
    -webkit-transform: translateX(-50%); 
    transform: translateX(-50%); 
    overflow: overlay; 
} 
.distribution-map .map-point:active, .distribution-map .map-point:focus { 
    position: absolute; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 0; 
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); 
    opacity: 1; 
    width: 550px; 
    height: 400px; 
    color: #e5e5e5; 
    z-index: 1; 
    -webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out; 
    transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out; 
} 
.distribution-map .map-point:active .content, .distribution-map .map-point:focus .content { 
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); 
    opacity: 1; 
    -moz-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out; 
    -o-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out; 
    -webkit-transition: opacity 0.25s ease-in-out, height 0.25s ease-in-out, overflow 0.25s ease-in-out; 
    -webkit-transition-delay: 0.25s, 0s, 0s; 
    -webkit-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out; 
    transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out; 
    overflow: hidden; 
} 
.distribution-map .map-point:active .content a:hover, .distribution-map .map-point:active .content a:active, .distribution-map .map-point:focus .content a:hover, .distribution-map .map-point:focus .content a:active { 
    color: #dff3fd; 
} 
     </style> 
</head> 
<body> 
<h1></h1> 
<div class="distribution-map"> 


    <button class="map-point" style="top:24%;left:26.5%"> 
     <div class="content"> 
      <div class="centered-y"> 
       <h2>Another</h2> 
       <p>details</p> 
       <iframe width="350" height="197" src="https://www.youtube.com/embed/5MgBikgcWnY" frameborder="0" allowfullscreen></iframe> 
      </div> 
     </div> 
    </button> 
    <button class="map-point" style="top:26%;left:49%"> 
     <div class="content"> 
      <div class="centered-y"> 
       <h2>Another</h2> 
       <p>Details...</p> 
      </div> 
     </div> 
    </button> 
    <button class="map-point" style="top:27.3%;left:71.4%"> 
     <div class="content"> 
      <div class="centered-y"> 
       <h2>Another</h2> 
       <p>Details...</p> 
      </div> 
     </div> 
    </button> 
    <button class="map-point" style="top:63.5%;left:31.5%"> 
     <div class="content"> 
      <div class="centered-y"> 
       <h2>Another one</h2> 
       <p>Details...</p> 
      </div> 
     </div> 
    </button> 
    <button class="map-point" style="top:65%;left:56%"> 
     <div class="content"> 
      <div class="centered-y"> 
       <h2>another one</h2> 
       <p>Details...</p> 
      </div> 
     </div> 
    </button> 
    <button class="map-point" style="top:68%;left:74%"> 
     <div class="content"> 
      <div class="centered-y"> 
       <h2>Another</h2> 
       <p>Details...</p> 
      </div> 
     </div> 
    </button> 
</div>

Quelle

2016-04-02 Joe

Hehe. Internet Explorer. –

Hahaha, es ist immer Internet Explorer – Joe

Dies ist ein großartiges Beispiel dafür, warum es nicht eine gute Idee ist, um wichtige Funktionen über CSS-Übergänge und Filter durchzuführen. Nicht sehr Cross-Browser-freundlich. Davon abgesehen sehe ich, dass du dein Klickproblem behoben hast! Ähnliches Problem ... zu versuchen, css 'focus' für ein onclick-Ereignis zu verwenden. –

Es scheint, dass < = IE9 nicht Übergänge verwenden können. http://caniuse.com/#feat=css-transitions

Es gibt eine polyfill, die allerdings hier helfen könnten: http://ecsstender.org/extensions/css3-transitions/index.html

Quelle

2016-05-09 03:32:23 Mazodude

Warum ist mein interaktives Bild auf NUR Internet Explorer störend?

Antwort

Verwandte Themen