iview drawer(transfer=false, inner=true ) show in tag outside rather than inside in IE10

Question

Situation is OK in Chrome but also the IE11

With "transfer"(false) and "inner"(true) set, Drawer work as follow link:

https://run.iviewui.com/prdkRwyB

normally effect

Problem occur when using IE10

The drawer show in tag outside rather than inside.

abnormally effect

And The html code of drawer has been place out of its parent tag

Answer 1

I found the problem solution.(iview 3.2.2)

iview/src/directives/tansfer-dom.js

This js file handle the DOM transfer job, which lead to drawer panel transfer out of the parent DOM.

inserted (el, { value }, vnode) {
        if ( el.dataset && el.dataset.transfer !== 'true') return false;
        el.className = el.className ? el.className + ' v-transfer-dom' : 'v-transfer-dom';
        const parentNode = el.parentNode;
        if (!parentNode) return;
        const home = document.createComment('');
        let hasMovedOut = false;

        if ( value !== false) {
            parentNode.replaceChild(home, el); // moving out, el is no longer in the document
            getTarget(value).appendChild(el); // moving into new place
            hasMovedOut = true
        }
        if (!el.__transferDomData) {
            el.__transferDomData = {
                parentNode: parentNode,
                home: home,
                target: getTarget(value),
                hasMovedOut: hasMovedOut
            }
        }
    },

As file show

if ( value !== false)

The judgment on Line 9 is unappropriated.

After replacing code as below and rebuild the iview by running 'npm run dist'，

if( value && value !== false )

drawer show well in IE10

Answer 2

If you use F12 developer tools to check the HTML and CSS, you can see that the drawer is outside the iview card body, it seems that this issue is related to iView, you could contact them and feedback this issue.

The screenshot in IE 11:

The screenshot in IE 10: