Polymer paper-fab 在移动端显示方形遮罩

Question

我的索引页上有一个 paper-fab，它会一直显示，直到我点击它。我说点击是因为这种行为只发生在移动环境中（在 chrome 移动视图或我的 Nexus 5 上）。

这是活动按钮（点击）：

注意背景是浅灰色的。按钮周围的这个方块是我想要删除的。按钮是完美的圆形。但是这个东西一点击就会出现

我测试了其他应用程序，如 Topeka，活动按钮（点击）显示正确：

但显然我的 paper-fab 和 Topeka 的之间没有什么特别之处。

这是元素声明和 CSS:

<paper-fab icon="add" id="add-button"></paper-fab>

paper-fab#add-button {
  position: relative;
  background-color: #3F51B5;
  display: block;
  margin-bottom: 15px;
}

有什么问题吗？

提前致谢。

Answer 1

你的灵丹妙药是：

body {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

我还建议您注意为 style 声明指定 shim-shadowdom 参数：

<style shim-shadowdom>

顺便说一句，您可能想将您的代码与官方 paper-fab docs rathen 进行比较，而不是 topeka。

希望对您有所帮助。

Polymer paper-fab 在移动端显示方形遮罩

Polymer paper-fab display square mask in mobile

css

web-component

polymer

material-design