css - 使用 translate3d 时 Material 设计精简版工具提示中断

Question

我正在尝试使用 MDL tooltips但是在使用 translate3d 属性(我在某些动画中使用)时它们无法按预期工作

Reproduction online

.container{
    position:absolute;
    left: 100px;
    top: 100px;
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
}

Answer 1

这是由于悬停在 material.js 时工具提示位置是如何动态计算的。 .请参阅: https://github.com/google/material-design-lite/blob/mdl-1.x/src/tooltip/tooltip.js#L69

当你添加 transform parent <div> 的样式传递给了 <div>工具提示并弄乱工具提示位置计算。

我的建议是更改 translate3d内部造型 <div>只有这样它才不会影响 tooltip <div> .