0

why does this code with unset cause the animation to not work over the element, whereas

this code works perfectly well without the code: all: unset?

(this was a nightmare to debug)

non link version: 

document.getElementById("mybutton").addEventListener("click", myflashgreen);

function myflashgreen() {

  document.getElementById("quizreminderarea").className += " flashgreen";
  document.getElementById("quizreminder").className += " flashgreen";

  setTimeout(function() {
    document.getElementById("quizreminderarea").classList.remove("flashgreen");
    document.getElementById("quizreminder").classList.remove("flashgreen");

  }, 410);

}
#quizreminder {
  all: initial;
  * {
    all: unset;
  }
}

.flashgreen {
  -webkit-animation-name: flashgreen;
  -webkit-animation-duration: 0.3s;
  animation-name: flashgreen;
  animation-duration: 0.3s;
}

@-webkit-keyframes flashgreen {
  from {
    background: #48ff00;
  }
  to {
    background: default;
  }
}

@keyframes flashgreen {
  from {
    background: #48ff00;
  }
  to {
    background: default;
  }
}

#div {
  width: 150px;
}

#quizreminder {
  left: 74%;
  height: 12em;
  background: white;
  color: black;
  position: fixed;
}

#quizreminderarea {
  width: 5000px;
  height: 12em;
  background: white;
  color: black;
  position: fixed;
}
<button id="mybutton">
      click me
    </button>

<div id="quizreminderarea"><textarea id="quizreminder" class=""></textarea></div>

removing the first css block will cause the desired result whereas leaving it will cause the textarea to block the animation completely, forcing it to the background

Asons
  • 84,923
  • 12
  • 110
  • 165
hydrix
  • 332
  • 2
  • 9
  • Well, with plain CSS you can't have one rule nested in side another, as you have with `* { all: unset; }` inside the `#quizreminder` rule. – Asons Mar 23 '17 at 11:52
  • I think reading this will give some more insight how and when to use `all`: http://stackoverflow.com/questions/36496273/overriding-css-property-all-unset – Asons Mar 23 '17 at 12:08
  • I was trying to use it to prevent pages from styling elements of my chrome extension using [this answer](http://stackoverflow.com/a/15903168/5412017) as a guide – hydrix Mar 23 '17 at 18:29

0 Answers0