在正文中加载脚本时,检查translate3d支持不起作用

时间:2016-06-13 15:21:45

标签: javascript css3 translate3d

proposed solution似乎在大多数情况下运行良好,但我注意到在<script>中使用<body>标记后,它无法检测到对translate3d属性的支持。

Reproduction online

这是用于检测3d支持的函数:

function has3d() {
    if (!window.getComputedStyle) {
        return false;
    }

    var el = document.createElement('p'),
        has3d,
        transforms = {
            'webkitTransform':'-webkit-transform',
            'OTransform':'-o-transform',
            'msTransform':'-ms-transform',
            'MozTransform':'-moz-transform',
            'transform':'transform'
        };
    // Add it to the body to get the computed style.
    document.body.insertBefore(el, null);

    for (var t in transforms) {
        if (el.style[t] !== undefined) {
            el.style[t] = "translate3d(1px,1px,1px)";
            has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]);
        }
    }

    document.body.removeChild(el);

    return (has3d !== undefined && has3d.length > 0 && has3d !== "none");
}

0 个答案:

没有答案