Modernizr.preserve3d returns false positive in IE11 on Windows 10

[splotzky]

Modernizr.preserve3d returns true in IE11 on Windows 10 (incorrect).
In IE11 on Windows 7 it returns false (correct).

Found this issue in Modernizr 3.2.0.

[patrickkettner]

hey @splotzky!
Thanks for the report! I am looking into this now, and will holler when I figure something out

[patrickkettner]

so, it seems like IE 11 added support for parsing the value, but never actually added the feature :[

as a result, we need to do a functional test to get accurate information. A functional test on preserve-3d is a big pain because it doesn't effect the layout or box model of any of the elements. The wonderful Matt Rakow from the Edge team brought up document.elementFromPoint, which takes 3d perspective into account. As a result, I have a working demo that I am testing in a few platforms still to shake out any bugs.

[splotzky]

This seems to be a tough nut to crack...

[splotzky]

I've played around with your working demo for a while.

I think my approach would be to create a parent element and a nested child element. These elements should both be set to transform-origin: right and transform: rotateY(90deg). If the browser supports transform-style: preserve-3d for the parent element, then the child element would be rotated by a total of 180 degrees to the right. If not, it would be rotated by only 90 degrees. Maybe then you could use document.elementFromPoint to see if the child element is at its expected position.

[aFarkas]

Element.getBoundingClientRect() also includes transformations.

[patrickkettner]

@splotzky not following - I haven't found an incorrect result with my test yet, have you?

[aFarkas]

@patrickkettner
http://jsfiddle.net/1bk58wz6/

[splotzky]

@patrickkettner I have found an incorrect result in Firefox 42.0 on Windows 7.

[patrickkettner]

thanks for the heads up. aFarkas' seems to be bulletproof as always.

A PR would be awesome, otherwise I hope to get one in myself tomorrow

On Mon, Nov 9, 2015 at 10:42 PM, splotzky notifications@github.com wrote:

@patrickkettner https://github.com/patrickkettner I have found an
incorrect result in Firefox 42.0 on Windows 7.

—
Reply to this email directly or view it on GitHub
#1748 (comment)
.

patrick

[splotzky]

@aFarkas I like your solution. It works reliably in IE 11 on Windows 10.

[aFarkas]

A PR would be awesome, otherwise I hope to get one in myself tomorrow

Will do, if you haven't yet. Just give 1-2 days. Want to also try to get something good considering the perf problems we get if we use testStyles.

[splotzky]

Two months have passed, but this solution is not included in Modernizr 3.3.0 (released on 11 Jan 2016). When will you publish it?

[roblarsen]

@splotzky it doesn't look like anyone has submitted the work in the form of a PR, so there's nothing to publish.

[denyskoch]

I just have put the code from @aFarkas into a test. Hope this helps

[aFarkas]

Sorry this is my fault. I totally forgot about this and have so much to work.

My problem with this code is/was, that it forces sync layout and punisches all browsers performance.

Could you test whether the following test works as expected?

define(['Modernizr', 'createElement', 'docElement'], function(Modernizr, createElement, docElement) {
    Modernizr.addTest('preserve3d', function() {
        var outerDiv, innerDiv;
        var CSS = window.CSS;
        var result = true;

        if(!CSS || !CSS.supports || !CSS.supports('(transform-style: preserve-3d)')){
            outerDiv = createElement('div');
            innerDiv = createElement('div');

            outerDiv.style.cssText = 'transform-style: preserve-3d; transform-origin: right; transform: rotateY(40deg);';
            innerDiv.style.cssText = 'width: 9px; height: 1px; background: #000; transform-origin: right; transform: rotateY(40deg);';

            outerDiv.appendChild(innerDiv);
            docElement.appendChild(outerDiv);

            result = innerDiv.getBoundingClientRect();
            docElement.removeChild(outerDiv);
            result = result.width && result.width < 4;
        }
        return result;
    });
});

[paulirish]

Put the PR up for review in #1920