CSS design lite 和 Drift 之间存在冲突 material

Question

我想使用 Drift.js (https://github.com/imgix/drift) inside a webapp using material design lite (https://getmdl.io/) 的缩放容量，但无法使用。我能够将其缩小为 css 问题，但我有点卡在这里。

这里有 2 个 fiddle，唯一的技术区别是第二个没有 material design lite css。

第一个fiddle：https://jsfiddle.net/mbitard/b41g2f0y/

new Drift(document.querySelector('img'), {
        paneContainer: document.querySelector('p'),
        inlinePane: true,
        inlineOffsetY: 0,
        containInline: true
});

第二个fiddle：https://jsfiddle.net/qankkgLe/2/

第一个 fiddle 的缩放不起作用。

Answer 1

看来 <main> 元素的 z-index 大于缩放。

通过将 z-index: 100; 添加到 .drift-zoom-pane.drift-inline { css class 我可以再次缩放。

CSS design lite 和 Drift 之间存在冲突 material

CSS Conflict between material design lite and Drift

javascript

css

material-design-lite