I have a button in an angular2 app. The app is running in chrome on a windows 10 touchscreen PC. If you touch the button normally it works fine, and the click function is executed, but if you hold 1-2 seconds, the button gets stuck and doesn't execute the function.
I have changed the css styling, to color the button black when the state :active is in effect, and the result is that the button stays black untill you touch somewhere else on the screen.
<button id="myButton" type="button" class="Button" (click)="onClick()"
[disabled]="buttonDisabled()">Click me<br></button>
and the 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;
}
I can't reproduce the error on my keyboard/mouse machine, it only fails when long pressing on the touchscreen.