[WebUI][NTP] Fixes remove button of most visited tiles flicker/disappear

Overriding color of the icon in hovered and focused states (via
overriding the background color of the masked image) seems to interfere
with the CSS transition applied to the background color of the masked
image. See below:

:host(:not([iron-icon])) #maskedImage {
  ...
  background-color: var(--cr-icon-button-fill-color);
  transition: background-color var(--cr-icon-button-transition);
  ...
}

My attempts at recreating this failed https://jsfiddle.net/g9tj82af/7/
however, setting -cr-icon-button-transition: none; solves the issue


Bug: 1087597
Change-Id: I7a0b8e704adf937be5d3cc75b0f1adb46111cf34
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2225339Reviewed-by: Tibor Goldschwendt <tiborg@chromium.org>
Commit-Queue: Moe Ahmadi <mahmadi@chromium.org>
Cr-Commit-Position: refs/heads/master@{#773823}

chrome/browser/resources/new_tab_page/most_visited.html

@@ -143,6 +143,7 @@
   cr-icon-button {
     --cr-icon-button-fill-color: var(--icon-button-color);
     --cr-icon-button-size: 28px;
+    --cr-icon-button-transition: none;
     margin: 4px 2px;
     opacity: 0;
     position: absolute;