How to make a round highlighting on touch instead of square?

[rvalitov]

On touch devices when you touch an element, it's being highlighted. In native apps if we click a round button, then it's highlighted according to its geometry, which is also round. But in Taiga all elements are highlighted square, no matter of their original geometry.

For example, I want to use MarkerIcon as a circle button. Sample code:

<a
          *ngIf="canGoBack"
          (click)="onClickBack()"
        >
          <tui-marker-icon
            class="tui-space_right-3"
            src="tuiIconArrowLeftLarge"
            mode="link"
          ></tui-marker-icon>
</a>

In this case the button looks like follow:

When I touch it, the highlighting is square:

I want it to be round for round elements. Any ideas how I can achieve that?

[waterplea]

The best thing you can do is remove this highlight with -webkit-tap-highlight-color: transparent; which is done on Taiga UI components. But in your case this highlight is on the a tag. Perhaps we should add a[tuiMarkerIcon] to selectors so icon can be put directly on a link.