Due to performance issues I've change our wall scrolling to use native scrolling (overflow-scroll) instead of js scrolling. (The infinite scroll is working)
The performance is somewhat better but here is the weird thing:
In android, when I scroll down, it just doesn't scroll down after some scrolling (scroll back up is working). When I do something like opening and closing the statusbar of the physical/simulator phone, then it is working again.
I guess it something related to the element refresh of the android WebView, any idea?
Related
I use SkiaSharp canvas to draw the main game screen, and then there are various Xamarin.Forms Buttons around the UI. This all works fine on when used directly on iPhone or iPad using a finger. However, when I connect a mouse (e.g., through a MacBook or otherwise), the buttons start working with about 10% chance after mouse-clicking on the SkiaSharp canvas (and not receiving the mouse click events with 90% chance). The SkiaSharp canvas itself works just fine.
If I bring up the iOS app launch menu from the bottom (which probably somehow temporarily exists the mouse navigation on the app), the buttons start working again with the mouse. But if I click the SkiaSharp canvas again with the mouse, the buttons have a high chance of becoming disabled again. If I change to using a finger, all works fine (even if the mouse clicks were not being registered immediately before). However, mouse clicks are not being registered even after touching with a finger, so finger-touching does not reset the issue with the mouse (but bringing up the menu from the bottom does).
We found this bug by testing the iOS game on MacBook Pro (the iOS apps recently came available on the App Store) but the same issue persists also directly with an iPad / mouse combination. It seems to be some sort of an issue between using a mouse (on iPad or on MacBook Pro), SkiaSharp canvas and Xamarin.Forms buttons.
Does anyone know what the root cause of the problem is and what is the workaround?
Not an answer as such, but some more information about reproducing the issue: A simpler repro case may be this small project: https://github.com/jrc14/TraceMatching/ .
Don't worry too much about what it's doing, but note that you're mean to click in the grey Skia canvas in the middle to create 'targets' - and that after you've done that, mouse-clicks are getting lost.
If you run it on a Mac, you'll see that, though the clicks get lost after you've clicked on the Skia canvas, they will start being received again if you click on something else (another app, or the Mac background).
(further edit) - after some noodling around I did find a workaround. If, once you've finished processing the touch action on the SKCanvasView, you reset its EnableTouchEvents property (i.e. set it to false, then back to true again), it seems that the clicks don't get lost any more,
I have four things: mobile site, iOS app, Android app, and Windows app.
The only time this occurs is on my Windows 10 Lumia PhoneGap app. (haven't tested other windows phones)
The divs with overflow-y do not scroll as you drag a finger up and down. Nothing happens until your finger comes off the device, then it throws the scrollbar. So technically it scrolls, but not in a way you'd expect. It makes it impossible to slowly scroll the page up.
Windows mobile site works as expected, the divs scroll in a controlled manner with the drag of your finger. Works same everywhere else too.
Anyone run into this sort of thing? I couldn't find any user-select, -ms-overflow*, or touchmove e.preventDefault() issues in the code.
I use ScrollMagic to trigger animations on each section of a web page. This works great for desktop and for some browsers on mobile.
However there are some mobile browsers (older versions of Safari and Chrome (on ipad)) that don't play these animations until the scrolling event is finished. I know there are ways around that. However instead, I would like to simply turn off these animations when not supported.
Is there a way to detect that with Modernizr? Or would I have to target specific browsers and its versions?
You wouldn't detect parallax animation. That isn't a browser feature, that is something that you can use browser features to accomplish.
In this case you would you be looking to detect if you are reflow the page during a scroll, or if it waits until after the scroll event fires. There is currently no detect for this, and creating one would get pretty greasy.
I believe what you are seeing is the result of the scroll event not firing as you scroll on certain browsers. I cannot think of a way to simulate this with javascript (triggering a scroll event will obviously only trigger one scroll event, so there isn't anything to gain there). As a result, I am not confident that you would ever be able to accurately detect this.
I completely agree with Patrick's answer, but would like to add that it is indeed possible to have immediate scroll events on the mobile versions of chrome and safari, you are talking about.
The issue you're describing is related to all iOS devices before version 8.
Before then the mobile browser engine did not trigger "true" scroll events while scrolling, but only once scrolling had come to a full halt (so after the inertia stopped). Even the execution of javascript was suspended, so you couldn't just run a loop to check the scroll position.
Long story short: There are ways around it using containers for scrolling and requestAnimationFrame.
The easiest way I found to get scroll events for pre iOS8 devices is iScroll.
I would recommend to check out this: http://janpaepke.github.io/ScrollMagic/examples/advanced/mobile_basic.html
and this:
http://janpaepke.github.io/ScrollMagic/examples/expert/mobile_advanced.html
So getting back to your original question: How to detect when you would even need those workarounds.
You'd need to check if the you're on iOS version 7 or lower, which, to my knowledge, can't be done with modernizr, as it is a feature detection library.
So check out this thread to learn more: Detect iOS version less than 5 with JavaScript
Occasionally when I scroll horizontally in an app using the magic mouse, the current tab or page I'm scrolling on freezes and thereon in that app, scrolling is completely non-functional.
For example, if I'm using Safari and I scroll horizontally to go back to the previous link, the current tab freezes, stuck in the middle of the animation. If I close the frozen tab, the other tabs work fine, but I can't scroll vertically or horizontally in them. I have to scroll using the scrollbar. No other apps are affected and if I restart the affected application, everything goes back to normal and the mouse scrolling is functional again.
Has anybody else had this issue? Any ideas on how to fix this?
I was running Lion when this issue started. I updated to Mavericks hoping it would be fixed, but no luck. I'm currently running Mavericks GM on an iMac (latest model).
This is an issue after installing Mavericks. Go to System Preferences/General and click on Show scroll bars: Check "Always". Hope this helps.
In the latest version of OSX and safari you can use mouse swipe gestures to go forwards and backwards through your browser history. my problem: I have a page with a horizontally scrolling image gallery. If you're using the mouse swipe gesture to scroll through the images, when you get to the end of the images its very easy to swipe into the next or previous page...
does anyone know a way to explicitly disable this using css or any other method?
Perhaps the following documents can help:
Handling Gesture Events
Preventing Default Behaviour
: with event.preventDefault();
These might only apply to iOS though.
Aside from that, I would say it's just how the browser handles the gestures, similar to how mouse-wheel scrolling will scroll a DIV block until it reaches the end then start to scroll the page as a whole.
Unfortunately, there's no way to prevent this behaviour since it's a browser gesture (event.preventDefault() on touchstart event won't work).