New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modernizr.preserve3d returns false positive in IE11 on Windows 10 #1748

Closed
splotzky opened this Issue Nov 5, 2015 · 16 comments

Comments

Projects
None yet
6 participants
@splotzky

splotzky commented Nov 5, 2015

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

This comment has been minimized.

Member

patrickkettner commented Nov 5, 2015

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

@patrickkettner

This comment has been minimized.

Member

patrickkettner commented Nov 6, 2015

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 comment has been minimized.

splotzky commented Nov 9, 2015

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

@splotzky

This comment has been minimized.

splotzky commented Nov 9, 2015

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

This comment has been minimized.

Member

aFarkas commented Nov 9, 2015

Element.getBoundingClientRect() also includes transformations.

@patrickkettner

This comment has been minimized.

Member

patrickkettner commented Nov 9, 2015

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

@aFarkas

This comment has been minimized.

Member

aFarkas commented Nov 9, 2015

@splotzky

This comment has been minimized.

splotzky commented Nov 10, 2015

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

@patrickkettner

This comment has been minimized.

Member

patrickkettner commented Nov 10, 2015

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

This comment has been minimized.

splotzky commented Nov 10, 2015

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

@aFarkas

This comment has been minimized.

Member

aFarkas commented Nov 12, 2015

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

This comment has been minimized.

splotzky commented Jan 13, 2016

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

This comment has been minimized.

Contributor

roblarsen commented Jan 13, 2016

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

denyskoch added a commit to denyskoch/Modernizr that referenced this issue Feb 3, 2016

@denyskoch

This comment has been minimized.

Contributor

denyskoch commented Feb 3, 2016

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

@aFarkas

This comment has been minimized.

Member

aFarkas commented Feb 3, 2016

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;
    });
});

patrickkettner added a commit that referenced this issue Feb 4, 2016

Merge pull request #1868 from denyskoch/master
fixed preserve-3d detect on IE11/Windows 10 in #1748
@paulirish

This comment has been minimized.

Member

paulirish commented Mar 9, 2016

Put the PR up for review in #1920

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment