How can I eliminate or deactivate the white flash that appears when I press a button via a mobile device?

Question

Chrome mobile phone. android.

There has to be a way to remove it?

It happens in the code example I provided also.

I can see it when the buttons are clicked via mobile.

Does anyone on here know what I am referring to?

When I tap one of the buttons via mobile, there is a white flash, how do I disable or remove that?

That is all I am trying to do in the code.

https://jsfiddle.net/xmdq14a2/1/

I am not able to take a screenshot of it because it happens too quickly.

To reproduce, tap one of the buttons via a mobile device.

Only occurs via mobile not desktop.

        <button class="linkButtonB btn-primaryC btnC">linkButton</button>
        <button class="linkButtonB btn-primaryC btnC">linkButton</button>
        <button class="linkButtonB btn-primaryC btnC">linkButton</button>
        <button class="linkButtonB btn-primaryC btnC">linkButton</button>

I am not sure what is causing it to occur.

(function manageLinks() {

  const linksButton = [{
    buttonClass: "linkButton btn-primary btn",
    title: "Links"
  }

  ];

  const buttonContainer = document.querySelector(".buttonContainerB");

  linksButton.forEach(function (links) {
    const button = document.createElement("button");
    button.className = links.buttonClass;
    button.textContent = links.title;
    button.classList.add("linkButton", "btnC", "btn-primaryC");
    button.setAttribute("data-destination", "#lb"); // Added this line
    buttonContainer.appendChild(button);
  });
})();

(function manageLinkButtonOpen() {

  function openModal(target) {
    const modal = document.querySelector(target);
    modal.classList.add("active");
  }
  function addLinkToButton() {
    const modalButton = document.querySelector(".linkButton");
    modalButton.addEventListener("click", function (event) {
      //const target = event.currentTarget.dataset.destination;
      //openModal(target);
      openModal(event.currentTarget.dataset.destination);

    });
  }
  addLinkToButton();

}());

(function manageLinkButtonClose() {


  function closeModal(modal) {
    modal.classList.remove("active");
  }

 function addCloseEventToModal() {
    const closeModals = document.querySelectorAll(".modalB");
    closeModals.forEach(function (modal) {
      modal.addEventListener("click", function (event) {
        //closeModal(event.target.closest(".modalB"));
        closeModal(document.querySelector(".modalB"));
      });
    });
  }
  addCloseEventToModal();
}());

body {
  margin: 0;
  padding: 0;
}

body {
  background: #121212;
  padding: 0 8px 0;
}

/*body:has(.outer-container:not(.hide)) {
  padding-top: 0;
}*/

body:has(.modal.active) {
  overflow: hidden;
}

body:has(.modalB.active) {
  overflow: hidden;
}

.outer-container {
  display: flex;
  min-height: 100vh;
  /*justify-content: center;
  flex-direction: column;*/
}

.buttonContainerB {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  max-width: 569px;
  gap: 10px;
}

/*.buttonContainerC {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  max-width: 569px;
  gap: 10px;
}
*/
.buttonContainerC {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-around;
    max-width: 569px;
    gap: 10px;
}

.buttonContainerC:after{
  content:"";
  flex-basis:183px;
}





.btn-primaryC {
  color: #2fdcfe;
  background-color: #000000;
  border-color: #2fdcfe;
}

.btnC {
  display: inline-block;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: #000000;
  border: 1px solid red;
  box-sizing: border-box;
  padding: 6px 12px;
  font-size: 16px;
  border-radius: 4px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}



.btn-primaryD {
  color: #2fdcfe;
  background-color: #000000;
  border-color: #2fdcfe;
}

.btnD {
  display: inline-block;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: #000000;
  border: 1px solid #2fdcfe;
  box-sizing: border-box;
  padding: 6px 12px;
  font-size: 16px;
  border-radius: 4px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}


.linkButtonB {
    flex-basis: 183px;
    /* width of each button */
    margin: 0;
    /* spacing between buttons */

    cursor: pointer;
}


.linkButton {
    flex-basis: 183px;
    /* width of each button */
    margin: 0;
    /* spacing between buttons */

    cursor: pointer;
}

.containerD.hide {
  display: none;
}


.modalB {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  /*background: rgba(0, 0, 0, 0.4);*/
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  transform: translate(0, -25%);
  opacity: 0;
  pointer-events: none;
  z-index: -99;
  overflow: auto;
  border-radius: 50%;
}

.modalB.active {
  /* display: flex;*/
  opacity: 1;
  transform: scale(1);
  z-index: 1000;
  pointer-events: initial;
  border-radius: 0;
  overflow: auto;
  padding: 8px 8px;
}

.inner-modalB {
  position: relative;
  margin: auto;
}

.containerC {
  /*display: flex;
  flex-wrap: wrap;
  flex-direction: column;*/
  /* added*/
  /* min-height: 100%;*/
  margin: auto;
  /* justify-content: center;
  align-content: center;*/
}

.containerC.hide {
  display: none;
}





.modal-footer {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: calc(16px - (8px * 0.5));
    background-color: transparent;
    border-top: 1px solid transparent;
    border-bottom-right-radius: calc(8px - 1px);
    border-bottom-left-radius: calc(8px - 1px);
}

.exitC {
  transform: translatey(100%);
  margin: -65px auto 0;
  inset: 0 0 0 0;
  width: 47px;
  height: 47px;
  background: black;
  border-radius: 50%;
  border: 5px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.exitC::before,
.exitC::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 5px;
  background: red;
  transform: rotate(45deg);
}

.exitC::after {
  transform: rotate(-45deg);
}

.closeB {
  transform: translatey(100%);
   margin: -65px auto 0;
  inset: 0 0 0 0;
  /*margin: auto auto 0;*/
  /*margin: 10px auto 0;*/
  width: 47px;
  height: 47px;
  background: black;
  border-radius: 50%;
  border: 5px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
  /*margin: auto;*/
  cursor: pointer;
}

.closeB::before,
.closeB::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 5px;
  background: red;
  transform: rotate(45deg);
}

.closeB::after {
  transform: rotate(-45deg);
}

<div class="outer-container ">
    

    <div class="containerC ">
        <div class="modal-contentA">
            <div class="buttonContainerB">
                <button class="linkButtonB btn-primaryC btnC">linkButton</button>
                <button class="linkButtonB btn-primaryC btnC">linkButton</button>
                <button class="linkButtonB btn-primaryC btnC">linkButton</button>
                <button class="linkButtonB btn-primaryC btnC">linkButton</button>
                <button class="linkButtonB btn-primaryC btnC">linkButton</button>
                <button class="linkButtonB btn-primaryC btnC">linkButton</button>
                <button class="linkButtonB btn-primaryC btnC">linkButton</button>
                <button class="linkButtonB btn-primaryC btnC">linkButton</button>
                <button class="linkButtonB btn-primaryC btnC">linkButton</button>
                <button class="linkButtonB btn-primaryC btnC">linkButton</button>
                <button class="linkButtonB btn-primaryC btnC">linkButton</button>
                <button class="linkButtonB btn-primaryC btnC">linkButton</button>
                <button class="linkButtonB btn-primaryC btnC">linkButton</button>
                <button class="linkButtonB btn-primaryC btnC">linkButton</button>
                <button class="linkButtonB btn-primaryC btnC">linkButton</button>
                <button class="linkButtonB btn-primaryC btnC">linkButton</button>
                <button class="linkButtonB btn-primaryC btnC">linkButton</button>
                <button class="linkButtonB btn-primaryC btnC">linkButton</button>
                <button class="linkButtonB btn-primaryC btnC">linkButton</button>
                <button class="linkButtonB btn-primaryC btnC">linkButton</button>
                <button class="linkButtonB btn-primaryC btnC">linkButton</button>
                <button class="linkButtonB btn-primaryC btnC">linkButton</button>
                <button class="linkButtonB btn-primaryC btnC">linkButton</button>
            </div>
           <div class="modal-footer">
        <button class="exitC exit" type="button" title="Exit" aria-label="Close"></button>
      </div>
        </div>
        <div id="lb" class="modalB">
            <div class="inner-modalB">

                <div class="buttonContainerC">
                    <a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
                    <a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
                    <a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
                    <a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
                    <a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
                    <a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
                    <a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
                    <a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
                    <a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
                    <a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
                    <a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
                    <a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
                    <a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
                    <a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
                    <a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
                    <a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
                    <a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
                    <a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
                    <a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
                    <a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
                    <a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
                    <a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
                    <a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>

                </div>
                <div class="linkButton"></div>
 <div class="modal-footer">
          <button class="closeB exit">&times</button>
      </div>
            </div>
        </div>
    </div>
</div>