In my Angular2 application, I am facing an issue with a button when running on a Windows 10 touchscreen PC in Chrome. Normally, the button works fine and executes the click function. However, if the button is held for 1-2 seconds, it gets stuck and fails to execute the function.
To troubleshoot, I modified the CSS styling of the button to turn black when the :active state is triggered. Surprisingly, the button remains black until another area on the screen is touched.
<button id="myButton" type="button" class="Button" (click)="onClick()"
[disabled]="buttonDisabled()">Click me<br></button>
Here is the corresponding CSS:
.Button {
background-color: #009de0;
font-size: 24px;
display: inline-block;
width: 163px;
height: 62px;
line-height: 99%;
border: none;
border-radius: 0px;
box-shadow: 0 0px #999;
transition: 1.2s;
}
.Button:active {
background-color: black;
transform: translateY(2px);
transition: 0.2s;
}
This issue seems to be specific to the touchscreen as I could not replicate it on a regular keyboard/mouse setup.