仅在IE Edge中覆盖不透明度值

Question

我使用this HTML / CSS / jQuery game构建了code living here。我对IE Edge有一个奇怪的错误。

应该发生的事情是，当用户点击从屏幕两侧滑入的其中一个元素时，我暂时显示＆＃34;成功＆＃34;选中标记或＆＃34;错误＆＃34; ＆＃34; X＆＃34;字符，然后使用CSS转换淡出它们，当我应用一个＆＃34; active＆＃34;使用jQuery。

相关的HTML是：

<main id="targetcontainer">
  <div class="top target">
    <a href="#">&nbsp;</a>
  </div>
  <div id="feedback">
    <div id="success">&#x2714;</div>
    <div id="error">&#x274c;</div>
  </div>
</main>

和相关的CSS：

#targetcontainer{
  position: relative;
  overflow: hidden;
  height: 83%;
}

.top{
  width: 100%;
}

#feedback div{
  position: absolute;
  top: 0px;
  left:0px;
  opacity: 0;
}

#feedback div.active{
  opacity:1;
  @include animation(200ms,800ms,ease-out,activeOut);
}
@include mykeyframe(activeOut){ from{opacity: 1;} to{opacity: 0;} }

.target a{
  text-decoration: none;
  color: #000;
  user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

它在Chrome中按预期工作。在IE Edge版本41.16299.15.0上，当我检查代码并手动添加＆＃34; active＆＃34; #success，我仍然没有看到复选标记，并且检查IE中的代码会产生更奇怪的结果：

最初，我看到＆＃34;不透明度：1;＆＃34;正在被覆盖，但上面没有任何覆盖它。

此状态应该是什么样的（在Chrome中正确显示）：

计算选项卡指向card.scss的第283行和第285行：

这些代码行的内容似乎与不透明度无关：

我已经嘲笑some of this in CodePen，以防从一开始就有用，但我无法在那里重现。

Answer 1

迈克，我决定提交一个答案，以便我可以包含一张图片，向您展示我在IE上遇到的问题。游戏应结束（参见左下方的所有X），但它会继续呈现四个选项。正如我所提到的，IE上没有音频，但在Edge，Chrome和Firefox上有音频

我验证了下载的代码，此site的行为相同。

单步执行IE上的代码，以下代码块存在问题。

      //wait for success sound to finish
      soundSuccess.addEventListener("ended", function(){
        //when all characters in the message have been completed
        if ( messageLength == $('.completed').length ){
          //redirect to end screen once all letters have been clicked
          $(location).attr('href', 'end.html');
        }
      });

    } else {
      //show the error feedback since this item has been clicked already or is not in the messaage
      $('#error').addClass('active');
      soundError.play();
      //remove a life
      $('.life:not(.lost):last').addClass('lost');

      //wait for success sound to finish
      soundError.addEventListener("ended", function(){
        //when all lives have been lost
        if ( lives == $('.lost').length ){
          //redirect to game over screen once all letters have been clicked
          $(location).attr('href', 'gameover.html');
        }
      });

两个事件侦听器永远不会检测到成功或错误。永远不会执行每个事件侦听器中的代码块。

我正在使用VS 2017进行调试。我希望IE和其他浏览器之间可能存在某些音频不兼容性。有一些设置Audio的方法可以让IE更开心。

顺便说一下，我玩了一场比赛。很好的照片，重要的其他和猫...

<强>更新

显然IE不喜欢.wav文件。我替换了.mp3并修复了声音，成功/错误事件监听器现在正常工作。游戏也因成功和失败而正确结束。我为CSS提供了一些针对供应商特定内容的补充。如果您愿意，我可以向您发送更新的CSS（需要电子邮件或上传点）。

var soundSuccess = new Audio("sound/success.mp3");
var soundError = new Audio("sound/error.mp3");

对于IE，Xs左下方仍为黑色与红色，这必然是另一个问题。

html {
    height: 100%;
}

body {
    font: 100% "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #333;
    background-color: #ccc;
    display: block;
    position: relative;
    box-sizing: border-box;
    padding: 1rem;
    overflow: auto;
    height: 100%;
    text-align: center;
}

.fullscreen {
    padding: 0;
    overflow-x: hidden;
}

    .fullscreen div {
        position: absolute;
        z-index: 9;
    }

    .fullscreen img {
        display: block;
    }

#end {
    color: #fff;
}

.staticscreen a {
    color: #fff;
}

.fullscreen h1 {
    font-size: 2rem;
    font-size: 7vw;
    text-align: center;
    text-shadow: 0 0 1rem black;
}

div.centered {
    left: 50%;
    -ms-transform: translateX(-50%);
    /* IE */
    -moz-transform: translateX(-50%);
    /* Firefox */
    -webkit-transform: translateX(-50%);
    /* Safari and Chrome */
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.staticscreen {
    position: relative;
    height: auto;
    display: inline-block;
    margin: 0 auto 0 auto;
}

    .staticscreen div {
        text-align: left;
        width: auto;
    }

#end-message {
    top: 1em;
}

#buttons {
    right: 1rem;
    bottom: .5rem;
    z-index: 10;
}

    #buttons a {
        position: relative;
        display: inline-block;
        bottom: 0;
    }

#start-buttons {
    float: right;
    margin-top: 2em;
}

#targetcontainer {
    position: relative;
    overflow: hidden;
    height: 83%;
}

#instructions {
    background-color: #fff;
    padding: .5rem;
    -moz-border-radius: 0.5rem;
    /* Firefox */
    -webkit-border-radius: 0.5rem;
    border-radius: 0.5rem;
    /* Safari and Chrome */
}

    /* speech bubble pointer */
    #instructions:after {
        content: '';
        position: relative;
        border-style: solid;
        border-width: 15px 15px 0;
        border-color: #fff transparent;
        display: block;
        width: 0;
        z-index: 1;
        margin-left: -15px;
        bottom: -1.3em;
        left: 20%;
    }

#kepler {
    bottom: 0;
    left: 1rem;
}

    #kepler img {
        width: 100px;
        width: 20vw;
    }

.button {
    background-color: #283;
    padding: .5rem;
    color: #fff;
    -moz-border-radius: 0.5rem;
    /* Firefox */
    -webkit-border-radius: 0.5rem;
    border-radius: 0.5rem;
    /* Safari and Chrome */
    text-decoration: none;
    text-transform: uppercase;
}

.button:hover {
        background-color: #4a5;
    }

.secondary {
    background-color: #666;
    margin-right: .5rem;
}

    .secondary:hover {
        background-color: #888;
    }

.fullscreen .button {
    font-size: .75rem;
}

.target, #feedback {
    position: absolute;
    -webkit-font-variant-numeric: slashed-zero;
    font-variant-numeric: slashed-zero;
    font-size: 4rem;
    font-size: 20vw;
}

#feedback {
    color: #283;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    /* IE */
    -moz-transform: translate(-50%, -50%);
    /* Firefox */
    -webkit-transform: translate(-50%, -50%);
    /* Safari and Chrome */
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/*
#feedback{
  color: $color-active;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
*/
    #feedback div {
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        /* IE */
        -moz-transform: translate(-50%, -50%);
        /* Firefox */
        -webkit-transform: translate(-50%, -50%);
        /* Safari and Chrome */
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        opacity: 0;
    }

/* show and quickly fade out the feedback on success or error */
        #feedback div.active {
            opacity: 1;
            -webkit-animation-delay: 200ms;
            -webkit-animation-duration: 400ms;
            -webkit-animation-timing-function: ease-out;
            -webkit-animation-name: activeOut;
            -webkit-animation-fill-mode: forwards;
            /* this prevents the animation from restarting! */
            -moz-animation-delay: 200ms;
            -moz-animation-duration: 400ms;
            -moz-animation-timing-function: ease-out;
            -moz-animation-name: activeOut;
            -moz-animation-fill-mode: forwards;
            /* this prevents the animation from restarting! */
            -o-animation-delay: 200ms;
            -o-animation-duration: 400ms;
            -o-animation-timing-function: ease-out;
            -o-animation-name: activeOut;
            -o-animation-fill-mode: forwards;
            /* this prevents the animation from restarting! */
            animation-delay: 200ms;
            animation-duration: 400ms;
            animation-timing-function: ease-out;
            animation-name: activeOut;
            animation-fill-mode: forwards;
            /* this prevents the animation from restarting! */
        }

@-webkit-keyframes activeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-moz-keyframes activeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-o-keyframes activeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes activeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}
/* max font size */
@media screen and (min-width: 768px) {
    .target, #feedback {
        font-size: 154px;
    }
}

.target a {
    text-decoration: none;
    color: #333;
    /*user-drag: none;*/
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.top img, .bottom img {
    max-width: 25%;
}

.top img, .top span {
    vertical-align: top;
}

/* nudge text up to be in the same place as an image, despite room on top of the letter in the font */
.top span {
    display: block;
}

.left img, .right img {
    max-width: 50%;
}

.top {
    top: 0;
    width: 100%;
    text-align: center;
    -webkit-animation-delay: 0;
    -webkit-animation-duration: 800ms;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-name: inTop;
    -webkit-animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
    -moz-animation-delay: 0;
    -moz-animation-duration: 800ms;
    -moz-animation-timing-function: ease-out;
    -moz-animation-name: inTop;
    -moz-animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
    -o-animation-delay: 0;
    -o-animation-duration: 800ms;
    -o-animation-timing-function: ease-out;
    -o-animation-name: inTop;
    -o-animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
    animation-delay: 0;
    animation-duration: 800ms;
    animation-timing-function: ease-out;
    animation-name: inTop;
    animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
}

@-webkit-keyframes inTop {
    from {
        margin-top: -50%;
    }

    to {
        margin-top: 0;
    }
}

@-moz-keyframes inTop {
    from {
        margin-top: -50%;
    }

    to {
        margin-top: 0;
    }
}

@-o-keyframes inTop {
    from {
        margin-top: -50%;
    }

    to {
        margin-top: 0;
    }
}

@keyframes inTop {
    from {
        margin-top: -50%;
    }

    to {
        margin-top: 0;
    }
}

.top.out {
    -webkit-animation-delay: 0;
    -webkit-animation-duration: 800ms;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-name: outTop;
    -webkit-animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
    -moz-animation-delay: 0;
    -moz-animation-duration: 800ms;
    -moz-animation-timing-function: ease-in;
    -moz-animation-name: outTop;
    -moz-animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
    -o-animation-delay: 0;
    -o-animation-duration: 800ms;
    -o-animation-timing-function: ease-in;
    -o-animation-name: outTop;
    -o-animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
    animation-delay: 0;
    animation-duration: 800ms;
    animation-timing-function: ease-in;
    animation-name: outTop;
    animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
}

@-webkit-keyframes outTop {
    from {
        margin-top: 0;
    }

    to {
        margin-top: -50%;
    }
}

@-moz-keyframes outTop {
    from {
        margin-top: 0;
    }

    to {
        margin-top: -50%;
    }
}

@-o-keyframes outTop {
    from {
        margin-top: 0;
    }

    to {
        margin-top: -50%;
    }
}

@keyframes outTop {
    from {
        margin-top: 0;
    }

    to {
        margin-top: -50%;
    }
}

.right {
    right: 0;
    width: 50%;
    text-align: right;
    top: 50%;
    -ms-transform: translateY(-50%);
    /* IE */
    -moz-transform: translateY(-50%);
    /* Firefox */
    -webkit-transform: translateY(-50%);
    /* Safari and Chrome */
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-animation-delay: 0;
    -webkit-animation-duration: 800ms;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-name: inRight;
    -webkit-animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
    -moz-animation-delay: 0;
    -moz-animation-duration: 800ms;
    -moz-animation-timing-function: ease-out;
    -moz-animation-name: inRight;
    -moz-animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
    -o-animation-delay: 0;
    -o-animation-duration: 800ms;
    -o-animation-timing-function: ease-out;
    -o-animation-name: inRight;
    -o-animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
    animation-delay: 0;
    animation-duration: 800ms;
    animation-timing-function: ease-out;
    animation-name: inRight;
    animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
}

@-webkit-keyframes inRight {
    from {
        margin-right: -50%;
    }

    to {
        margin-right: 0;
    }
}

@-moz-keyframes inRight {
    from {
        margin-right: -50%;
    }

    to {
        margin-right: 0;
    }
}

@-o-keyframes inRight {
    from {
        margin-right: -50%;
    }

    to {
        margin-right: 0;
    }
}

@keyframes inRight {
    from {
        margin-right: -50%;
    }

    to {
        margin-right: 0;
    }
}

.right.out {
    -webkit-animation-delay: 0;
    -webkit-animation-duration: 800ms;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-name: outRight;
    -webkit-animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
    -moz-animation-delay: 0;
    -moz-animation-duration: 800ms;
    -moz-animation-timing-function: ease-in;
    -moz-animation-name: outRight;
    -moz-animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
    -o-animation-delay: 0;
    -o-animation-duration: 800ms;
    -o-animation-timing-function: ease-in;
    -o-animation-name: outRight;
    -o-animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
    animation-delay: 0;
    animation-duration: 800ms;
    animation-timing-function: ease-in;
    animation-name: outRight;
    animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
}

@-webkit-keyframes outRight {
    from {
        margin-right: 0;
    }

    to {
        margin-right: -50%;
    }
}

@-moz-keyframes outRight {
    from {
        margin-right: 0;
    }

    to {
        margin-right: -50%;
    }
}

@-o-keyframes outRight {
    from {
        margin-right: 0;
    }

    to {
        margin-right: -50%;
    }
}

@keyframes outRight {
    from {
        margin-right: 0;
    }

    to {
        margin-right: -50%;
    }
}

.bottom {
    bottom: 0;
    width: 100%;
    text-align: center;
    -webkit-animation-delay: 0;
    -webkit-animation-duration: 800ms;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-name: inBottom;
    -webkit-animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
    -moz-animation-delay: 0;
    -moz-animation-duration: 800ms;
    -moz-animation-timing-function: ease-out;
    -moz-animation-name: inBottom;
    -moz-animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
    -o-animation-delay: 0;
    -o-animation-duration: 800ms;
    -o-animation-timing-function: ease-out;
    -o-animation-name: inBottom;
    -o-animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
    animation-delay: 0;
    animation-duration: 800ms;
    animation-timing-function: ease-out;
    animation-name: inBottom;
    animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
}

@-webkit-keyframes inBottom {
    from {
        margin-bottom: -50%;
    }

    to {
        margin-bottom: 0;
    }
}

@-moz-keyframes inBottom {
    from {
        margin-bottom: -50%;
    }

    to {
        margin-bottom: 0;
    }
}

@-o-keyframes inBottom {
    from {
        margin-bottom: -50%;
    }

    to {
        margin-bottom: 0;
    }
}

@keyframes inBottom {
    from {
        margin-bottom: -50%;
    }

    to {
        margin-bottom: 0;
    }
}

.bottom.out {
    -webkit-animation-delay: 0;
    -webkit-animation-duration: 800ms;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-name: outBottom;
    -webkit-animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
    -moz-animation-delay: 0;
    -moz-animation-duration: 800ms;
    -moz-animation-timing-function: ease-in;
    -moz-animation-name: outBottom;
    -moz-animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
    -o-animation-delay: 0;
    -o-animation-duration: 800ms;
    -o-animation-timing-function: ease-in;
    -o-animation-name: outBottom;
    -o-animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
    animation-delay: 0;
    animation-duration: 800ms;
    animation-timing-function: ease-in;
    animation-name: outBottom;
    animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
}

@-webkit-keyframes outBottom {
    from {
        margin-bottom: 0;
    }

    to {
        margin-bottom: -50%;
    }
}

@-moz-keyframes outBottom {
    from {
        margin-bottom: 0;
    }

    to {
        margin-bottom: -50%;
    }
}

@-o-keyframes outBottom {
    from {
        margin-bottom: 0;
    }

    to {
        margin-bottom: -50%;
    }
}

@keyframes outBottom {
    from {
        margin-bottom: 0;
    }

    to {
        margin-bottom: -50%;
    }
}

.bottom img, .bottom span {
    vertical-align: bottom;
}

.left {
    left: 0;
    width: 50%;
    text-align: left;
    top: 50%;
    -ms-transform: translateY(-50%);
    /* IE */
    -moz-transform: translateY(-50%);
    /* Firefox */
    -webkit-transform: translateY(-50%);
    /* Safari and Chrome */
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-animation-delay: 0;
    -webkit-animation-duration: 800ms;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-name: inLeft;
    -webkit-animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
    -moz-animation-delay: 0;
    -moz-animation-duration: 800ms;
    -moz-animation-timing-function: ease-out;
    -moz-animation-name: inLeft;
    -moz-animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
    -o-animation-delay: 0;
    -o-animation-duration: 800ms;
    -o-animation-timing-function: ease-out;
    -o-animation-name: inLeft;
    -o-animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
    animation-delay: 0;
    animation-duration: 800ms;
    animation-timing-function: ease-out;
    animation-name: inLeft;
    animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
}

@-webkit-keyframes inLeft {
    from {
        margin-left: -50%;
    }

    to {
        margin-left: 0;
    }
}

@-moz-keyframes inLeft {
    from {
        margin-left: -50%;
    }

    to {
        margin-left: 0;
    }
}

@-o-keyframes inLeft {
    from {
        margin-left: -50%;
    }

    to {
        margin-left: 0;
    }
}

@keyframes inLeft {
    from {
        margin-left: -50%;
    }

    to {
        margin-left: 0;
    }
}

.left.out {
    -webkit-animation-delay: 0;
    -webkit-animation-duration: 800ms;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-name: outLeft;
    -webkit-animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
    -moz-animation-delay: 0;
    -moz-animation-duration: 800ms;
    -moz-animation-timing-function: ease-in;
    -moz-animation-name: outLeft;
    -moz-animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
    -o-animation-delay: 0;
    -o-animation-duration: 800ms;
    -o-animation-timing-function: ease-in;
    -o-animation-name: outLeft;
    -o-animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
    animation-delay: 0;
    animation-duration: 800ms;
    animation-timing-function: ease-in;
    animation-name: outLeft;
    animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
}

@-webkit-keyframes outLeft {
    from {
        margin-left: 0;
    }

    to {
        margin-left: -50%;
    }
}

@-moz-keyframes outLeft {
    from {
        margin-left: 0;
    }

    to {
        margin-left: -50%;
    }
}

@-o-keyframes outLeft {
    from {
        margin-left: 0;
    }

    to {
        margin-left: -50%;
    }
}

@keyframes outLeft {
    from {
        margin-left: 0;
    }

    to {
        margin-left: -50%;
    }
}

#hud {
    margin-top: 1em;
    vertical-align: bottom;
    text-align: left;
}

#lives {
    margin-top: .2em;
}

.life {
    display: inline-block;
    position: relative;
    overflow: visible;
    width: auto;
    height: auto;
}

    .life img {
        width: 1em;
    }

.lost img {
    opacity: .5;
}

.lost::after {
    content: "\00274C";
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
}

.item {
    margin-right: .1em;
    display: inline-block;
    border-bottom: 1px #333 solid;
}

    .item.space {
        border-bottom: none;
    }

.item-letter {
    visibility: hidden;
}

.completed .item-letter {
    visibility: visible;
}

.item img {
    max-width: 2em;
    max-height: 2em;
}

.lightning {
    position: absolute;
    z-index: 10;
    width: 216px;
    height: 120px;
    top: 0;
    /*user-drag: none;*/
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.lightningLeft {
    left: -216px;
}

.lightningRight {
    right: -216px;
    -moz-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1);
    display: none;
}

.upsidedown {
    -moz-transform: scale(1, -1);
    -o-transform: scale(1, -1);
    -webkit-transform: scale(1, -1);
    transform: scale(1, -1);
}

.em {
    font-style: italic;
}

/*# sourceMappingURL=card.css.map */

这是Edge的屏幕截图。