search

vguillou / parallax-element

A Polymer element allowing to declaratively create simple vertical or horizontal parallax scrolling effects, working on desktop and mobile. It features built-in deactivation of the effect in browsers (IE) that do not fully support the CSS transformations leveraged to achieve the parallax scrolling.
MIT License
25 stars 2 forks source link

Is this supposed to be compatible with IE 11? #3

Closed OutsourcedGuru closed 8 years ago

OutsourcedGuru commented 8 years ago

Just noting that this looks fantastic on Safari 9.0.3 on OS X El Capitan and again on Safari on an iPad II with iOS 9.2.1.

I am noting that on the iPad in Portrait rotation mode it's best to stretch the height of the upper (depth:0) layers so that they're taller. Otherwise, you can see where the two photos meet together behind the scenes. You can simulate this by re-sizing a standard browser so that it's narrower than it is tall.

In testing this with IE 11 on a Windows 8.1 computer I'm seeing that there is no parallax feature—everything is all on the same layer. Polymer is providing the expected paper effects like shadows and such but parallax-element doesn't seem to be supporting this browser from what I can see.

Is this supposed to work on newer versions of IE?

OutsourcedGuru commented 8 years ago

Windows 8.1 => IE 11: I can confirm that your code sets it as incompatible (by design, presumably) and this displays an incompatibility message on your Overview demo page.

Interestingly enough, in the F12 developer screen of IE 11 the highest setting for emulation is, by default, "Edge" rather than 11, for example.

Windows 10 => Edge: Trying this with the actual Edge browser does actually try to do the parallax effect! Okay, so it's not as smooth as on the Mac platforms but it tries and that's a good sign.

Windows 10 => Edge: there's a feature called "Open with Internet Explorer" which behaves as expected from my experience above with Windows 8.1 + IE 11. The F12 developer's screen here indicates "11 (Default)" in the Emulation tab.

Windows 10 => Chrome v48.0 behaves as expected with smooth scrolling throughout.

vguillou commented 8 years ago

Thanks for those reports! :smile:

I can confirm you that it's not compatible with IE. No IE version support transform-style: preserve-3d, and probably never will. Si, by design, the element renders everything flat. If not, you'd see huge scaling problems (try forcing activation on the overview demo, you'll see why i disabled it!)

MS Edge should work, although i'm having a hard time testing on this browser. Anyway, IE "Edge" rendering mode is not at all related to the new browser. Not sure exactly what it is though.

vguillou commented 8 years ago

BTW, can you tell me on which demo you are seeing a sizing issue please ? Thanks !

OutsourcedGuru commented 8 years ago

I can confirm on a second (new) Windows 10 upgrade that Edge does display the parallax scrolling effect. It's just clunky to say the least—it's not a smooth scroll like you see on the Mac browsers or within Chrome. I think I'm mostly using a modified real-world-demo and I may have introduced the sizing problem myself in portrait mode. The in-between white space should be minimally the height of a typical graphic that's in the background.

vguillou commented 8 years ago

Ok thanks. I added a browser support table in the Readme.md, Is it a satisfactory answer to the initial question ? :-)

OutsourcedGuru commented 8 years ago

@vguillou Of course.