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>

I can't reproduce the error on my keyboard/mouse machine, it only fails when long pressing on the touchscreen.

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.