Button with `preserve-3d`, `perspective` and translate3d(0px, 0px, -5px); doesn't submit FORM

by Konstantin Rouda

HTML

<form id="form">
       <p class="button-container">
          <button type="submit" id="open-btn">Buy</button>
       </p>
</form>

<div>
 <output id="output"></output>
</div>


<!-- 

 TEST CASE FOR DEMONSTRATION OF THE CURIOUS BEHAVIOR
 when we set   transform-style: preserve-3d and `perspective`
 on the direct parent of the <button>, then set `transform: translate3d(0px, 0px, -5px);` on the active state. Button won't submit the form.
-->

CSS

* {
  box-sizing: border-box;
}


.button-container {
  width: 350px;
  height: 350px;
  transform-style: preserve-3d;
  perspective: 1000px;
  border: 1px solid rgba(70, 70, 70, .11);
}



BUTTON {
  padding: .5rem 3rem;
  font-size: 1.2em;
  border: 0;
  border-radius: .1rem;
  background: rgb(54, 126, 255);
  color: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .2);
  cursor: pointer;
}

BUTTON:active {
  transform: translate3d(0px, 0px, -5px);
}

JavaScript

const form = document.getElementById("form");
const output = document.getElementById("output");

form.addEventListener("submit", function onSubmit (e) {

	output.innerHTML = `for has been submitted at ${Date()}`;

	e.preventDefault();
});