CSS Pseudo Selector :active in React and Static Html displays differently on Iphone chrome browser

Question

I've recently come across this issue that pseudo selector :active doesn't display the same on React and Static page.

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.

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;
}

please check out these both link below on Iphone chrome broswer. ( not Android)

React page - https://codesandbox.io/s/elated-smoke-o8m2xo?file=/src/index.css:0-476

Static page without framework - https://codesandbox.io/s/vigorous-dew-vssmej

Does anyone know about this issue? or any solution for this?