title: CSS Pseudo Selector :active in React and Static Html displays differently on Iphone chrome browser
body: <p>I've recently come across this issue that
  pseudo selector :active doesn't display the same on React and Static page.</p>
  <p>this is what I apply
  css code exactly the same
  I don't even understand why this selector renders on mobile differently according to the framework and static.</p>
  <pre><code>button {
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    -webkit-appearance: none;
    text-transform: none;
    outline: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    cursor: pointer;
  }
  
  .form_button {
    display: block;
    position: relative;
    padding: 8px 0 8px 58px;
    border: 1px solid red;
    border-radius: 8px;
    margin-bottom: 18px;
    width: 200px;
    height: 100px;
    text-align: left;
  }
  .form_button:active {
    background-color: green;
  }
  </code></pre>
  <p>please check out these both link below on Iphone chrome broswer. ( not Android)</p>
  <p>React page - <a href="https://codesandbox.io/s/elated-smoke-o8m2xo?file=/src/index.css:0-476" rel="nofollow noreferrer">https://codesandbox.io/s/elated-smoke-o8m2xo?file=/src/index.css:0-476</a></p>
  <p>Static page without framework - <a href="https://codesandbox.io/s/vigorous-dew-vssmej" rel="nofollow noreferrer">https://codesandbox.io/s/vigorous-dew-vssmej</a></p>
  <p>Does anyone know about this issue?
  or any solution for this?</p>