michael_bitard michael_bitard - 1 year ago 61
Javascript Question

CSS Conflict between material design lite and Drift

I want to use the zoom capacity of Drift.js (https://github.com/imgix/drift) inside a webapp using material design lite (https://getmdl.io/) and I can't get it to work. I was able to narrow it down to a css issue, but I'm kind of stuck here.

Here are 2 fiddles, the only technical difference is that in the second one, the material design lite css is absent.

The first fiddle: https://jsfiddle.net/mbitard/b41g2f0y/

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

The second fiddle: https://jsfiddle.net/qankkgLe/2/

The zoom on the first fiddle doesn't work.

Answer Source

It appears that the <main> element has a greater z-index than the zoom.

By adding z-index: 100; to .drift-zoom-pane.drift-inline { css class I can zoom again.