Comments (12)
(Guess I should just fork parallax but for now tested on jsbin., sorry)
I played around with IE11/Surface a bit more: http://jsbin.com/UPiqAJU/33/edit
Does seem to work now. IE11 actually has two events:
- DeviceOrientation http://msdn.microsoft.com/en-us/library/ie/dn322035%28v=vs.85%29.aspx
- DeviceMotion http://msdn.microsoft.com/en-us/library/ie/dn342897%28v=vs.85%29.aspx
I tried the DeviceMotion and its event.rotationRate property which seems more like DeviceOrientation on iPad. DeviceOrientation on the other hand gives absolute positions so actually responds to myself "rotating" and not just the device. Not sure how to use this (yet).
from parallax.
Hi @cthedot, the reason I added the desktop
check is to make the library work on MacBook Pros and other desktop devices that have a gyroscope built in. People accessing the site on a MacBook Pro were complaining that the demo wasn't working for them (using their mouse) because they didn't realise that this machine has a gyroscope.
In my opinion it is a far more natural and intuitive experience to use the cursor position on all desktop devices since waving your laptop around is not something you would normally do when viewing a website 😄
However, I totally agree that user agent sniffing is bad practice and this regex is not yet mature enough to cater for all the devices and environments out there...but that's what GitHub is for and I am working as hard as I can to resolve all these compatibility issues.
It would be super helpful if you could let me know what User Agent String the MS Surface is spitting out so I can amend the desktop
regex to cater for this device.
from parallax.
...oh and as a side note, most modern smart devices have both the DeviceOrientation
and DeviceMotion
events, I just chose to use the former because it is more widely supported and the data from this event is all I needed to create the effect.
from parallax.
regarding DeviceOrientation/DeviceMotion
I simply was unaware, shame really, sorry.
I could not bring DeviceOrientation
to give results I understand, so moved to DeviceMotion
but as you said, it probably does not matter in the end. I do think DeviceOrientation
does need calibration though?
from parallax.
@cthedot could you please post your User Agent String as per my first comment so I can update the desktop
regex to support the MS Surface?
from parallax.
hi @wagerfield, I think parallax is one of the first "web" examples where both Device and Feature detection fail.
As you said, Device detection/UA sniffing is bad practice. But even if you tried to detect another device like the Surface it would not help. Surface (both RT and Pro) may mainly be used as a tablet (RT maybe even more than Pro but that depends on the user) and would therefore mostly use DeviceOrientation Events
but may also be used as a laptop when the keyboard/touchpad cover and maybe even a real mouse is connected.
Even more unsure is the situation for "real" hybrid devices like the Lenovo Yoga series or the Sony Vaio Duo. Both do work as as a laptop with the included keyboard/touchpad. But both may also perfectly reasonably be used as a tablet. The Yoga keyboard folded 360° under the screen or in the case of the Vaio Duo the screen lowered onto the keyboard.
There is no way to know how a user is interacting with the device.
Just for the record, UA strings:
IE11 on Surface both Metro and Desktop version, both with Events:
Mozilla/5.0 (Windows NT 6.3; ARM; Trident/7.0; Touch; .NET...; Tablet PC 2.0; rv:11.0) like Gecko
IE11 on Desktop (not laptop):
Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; .NET...; rv:11.0) like Gecko
But even if you tried to check for ARM vs WOW64 or Tablet PC 2.0 (which I think is also present if you connect a Wacom tablet) it would not help for the above reasons.
As you described the situation with the Mac having Gyroscope and also for the same above reasons feature detection does not work either.
I think the only solution is to use both DeviceOrientation
and MouseEvents
as input and initialize both for all devices.
I guess you might ignore MouseEvents for some devices you know for sure they won't be used with a mouse (like maybe iPad, iPhone, Android?, Blackberry?). So a bit the other way round the detection works currently. But even here you do not know for sure e.g. on an Android device or iPad an external keyboard/mouse is used.
Also for some devices you definitely know they are not tablets you could disable DeviceOrientation events. But these would be mostly Macs which at least for now are not on a tablet/hybrid device. But even that might change. Maybe Windows 7 devices could get MouseEvents only but even there are hybrids out there.
A better idea I think as both feature nor device detection do help really I think the best thing to do is to let the user decide. Same as in games which have a setting Mouse/Keyboard or Gamepad or Touch there should be a switch to disable MouseEvents or DeviceOrientationEvents. Parallax just would have to have an API to disable one or the other from websites which of course have to provide these settings UI.
Hope I did not babble too much and made at least my point clear. Please let me know what you think. Thanks!
from parallax.
Could you please post your User Agent String as per my first comment so I can update the desktop regex to support the MS Surface?
Please rethink this, it won't work :(
from parallax.
BTW, there is another problem regarding IE11 support. The enable
is called once but is called again with a setTimeout
where it fails on IE. If this.orientationSupport
is changed to window.DeviceOrientationEvent
(ideally a helper function maybe) init does work on IE11, else it mostly (?!) fails:
Parallax.prototype.enable = function() {
...
if (window.DeviceOrientationEvent) {
from parallax.
sorry, did not read your code right. this.orientationSupport
is set deliberately but seems supportDelay of 500ms is not long enough for Surface. I tried 1000 and it is better. Still you have to move the device, else orientationSupport just stays disable. Wonder why this is coded like this as even an iPad if laying flat on a table might end up without orientationSupport, or does it?
from parallax.
Since pretty much every issue associated with this library concerns compatibility, I recognise that this is it's weakest point. Subsequently I am thinking very hard about how I can implement a solution that allows the deviceorientation
and mousemove
events to work in harmony with one another and remove all the User Agent sniffing and desktop
logic.
Also, thanks for your investigations regarding the if (window.DeviceOrientationEvent) {...
in the enable
method. I can only assume that the library is being read before IE11 has fully initialised and the boolean orientationSupport
flag I am setting on the prototype is null
or undefined
at the time that it is parsed.
This is all really great stuff and super helpful @cthedot, so thank you once again! I will let you know as and when I implement some more updates.
from parallax.
@wagerfield actually it is nice you take the time to listen to this. If I can do anything more just let me know
from parallax.
does close mean fixed or wontfix? At least the demo still does not work (at least not on orientation, tap on screen works).
from parallax.
Related Issues (20)
- resets the transform? HOT 1
- found bugfix for mediastream handling HOT 1
- Demo link is broken HOT 2
- Not working with absolute positioned layers HOT 1
- Firefox: Buttons and Links in Parallax Scene doesn't work anymore after scrolling.
- [DOC] Faulty Demo Link HOT 3
- Parallax layer flickering on mobile landscape mode HOT 1
- Parallax animations moving really slow on Mac Chrome HOT 6
- [support] parallax only updates on click in react HOT 3
- Demo link in README is broken HOT 1
- Does not work with Angular Universal HOT 1
- npm install doesn't seem to work when using `import` HOT 6
- Gyroscope troubleshooting on WordPress HOT 1
- Uncaught ReferenceError: Parallax is not defined HOT 1
- Img starting position HOT 1
- issue to import it
- Anyway to disable parallax only for Mobile Devices. HOT 3
- Request to add a clock, date and weather text HOT 8
- Works awesome… not on mobile though HOT 2
- Bug! this repos home page shows up in desktop HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from parallax.