Has anyone had any luck with working out a solution to get -webkit-overflow-scrolling: touch to work in Sencha Touch 2?
Although the performance is quite good on iPhones, Sencha's scroller is still too choppy on Android Phones. Meanwhile the CSS3 Solution would seem to be the choice to go for now on Android.
Anyone any luck?
To apply native style scrolling to a panel given as;
Ext.create('Ext.Panel', {
style: 'overflow-y:scroll;-webkit-overflow-scrolling:touch;',
id: 'scroll-panel',
items:[...]
});
overwrite touch move event to prevent Sencha Touch to control over scrolling on that panel
var scrollPanelDom = Ext.get("scroll-panel").dom;
scrollPanelDom.addEventListener("touchmove", function(e){
e.stopPropagation();
}, false);
so you can get rid of choppy scrolling and have it native style instead on IOS devices (and according to my tests better scrolling experience on Android devices)
At the moment, -webkit-overflow-scrolling is exclusive to Mobile Safari on iOS 5 and later. So no Android anyway.
Related
I created a page with a grid in Xamarin.Forms. Now I am trying to adjust it for landscape as well. The problem is, that I need to use a scrollview for the portrait mode and disable the scrollview for landscape mode. I found a solution in my other post, which works good for android, but for iOS the buttons aren't clickable. Is there an other possibility to disable the scrollview for landscape? Or how can I make the buttons clickable for iOS? I posted my code already in this post. Maybe someone can help me. Thanks in advance.
I finally fixed it. I removed my old solution and I defined each row like this:
mainLayout.RowDefinitions.Add(new RowDefinition { Height = height / 8 });
Now each row have the perfect height and scrolling is disabled for landscape. (I divided it with eight, because I use eight rows now)
I am developing a H5 Canvas game using PIXI js.
I am struggling in implementing the ios Safari swipe up to full screen message.
Added a new div with window.width + 1000 px.
It does remove the safari address bars but i am not sure when to remove the div. i.e. i am not able to identify if i am in full mode or not.
Also, what should i do to get back the div enabled if someone accidentally or forcefully comes out of full screen mode?
I am open to use any opensource lib as well but wasn't able to find one except screenfull.js which doesn't supports safari mobile
I need to scroll a list of images horizontally in ionic v3. I tried using ion-scroll component and works perfect for android platform, but i need same behavior in the browser.
So when I hide the scroll bar it doesn't work, also I tried to set scroll width to 0. Seems that the swipe funcionality only works in mobile devices.
::-webkit-scrollbar, *::-webkit-scrollbar {
display: none;
//width: 0 !important
}
I need to archive something like this.
I also check ngx-swiper-wrapper library, but i could not get the expected result.
Is there other library that can help with this?
Thanks.
I was trying to achieve the same (horizontal scrolling behavior across all devices and browser) and eventually did this using slider:
https://ionicframework.com/docs/components/#slides
Slides component is based on iDangerous swiper and was made to support coverflow like UIs with multiple slides visible: http://idangero.us/swiper/demos/110-slides-per-view.html
Here is simple implementation:
https://ionic-iw4z5s.stackblitz.io
For the gallery on my website I use media queries to readjust the image sizes depending on the screen width (I use the folio theme by galleria) and the image size is supposed to change when you tilt your phone - but that only happens after you reload it manually. (Adding orientation landscape or portrait doesn't do anything).
So basically, I want to avoid reloading the whole page because it involves reloading the images - the information is in the CSS file, can I reload that file individually?
Thanks a bunch!
Use e.g. jQuery mobile and catch orientationchange event.
$(window).bind('orientationchange', function(e) {
if(e.orientation === 'landscape'){
//edit you CSS
// or reload image
}else{
// roll back
}
});
All recent smartphone and tablet browsers definitely support media queries based on orientation, see article here. It is mentioned there that it is supported from iOS 4.0 upwards. If you scroll down the Bonus: iPhone support section it also provides a workaround for phones that are quirky about triggering automatically.
If you specify the media query as part of the CSS include it shouldn't be loaded until it becomes applicable, automatically solving your problem.
If you still run into platforms that have problems, you can use the Javascript onOrientationChange event as a fallback, using for example Mootools Utility/Asset to load images and stylesheets at runtime, or its jQuery counterpart.
I've created a rather simple Flex application using Flex Builder 4, which connects to a webcam on the user's PC. To do so, Flash is presenting the user with the infamous privacy warning.
Now, the problem is that user can't click on the panel, as it seems unresponsive to any user interaction.
Some more details:
Firefox 3.6.12 on Mac/OSX, Snow Leopard.
Adobe Flash Plugin 10.1.85.3 / 10.1 r85
The Flex app is working fine in its own window/tab but the problem shows up as soon as the html page with the Flex app is embedded into the iframe of another page.
If I artificially put an Alert box before connecting the camera, the user is able to interact with the Flex application but as soon as the Privacy panel is shown, the Flex app stops interacting.
The app works fine under Chrome and Safari but I have not tried this under Windows.
I've read that there are problems with CSS positioning so I removed any CSS style impacting the Flex app.
Before I change my strategy and get rid of the iframe (which will cost me quite some effort) I'd be happy to know whether others have experienced the same problem and if there are workarounds.
Thanks.
I had the same issue for weeks now. I found what may be the problem. It has something to do with the css alignment. try to remove the text-align:center; from the div flash is in and it will work again. Somehow the active areas from the security panel don´t shift with the display image…
In my application, this problem is apparently caused by an element containing the flash having the css margin: 0 auto. This leads to the left edge of the flash object sometimes being reported as a decimal, e.g. $('.flash').position().left --> 450.5px. Whenever it's not a whole number, the security panel failed to react to clicks.
The fix described in https://bugs.adobe.com/jira/browse/FP-4183 and linked to by Christiano almost works. However, it failed whenever the browser was resized to be so small that the left margin disappeared.
Here's what fixed the issue for me:
function registerMozillaFlashFix() {
if ($.browser.mozilla) {
$(window).resize(function() {
$(".flash").each(function(ii, e) {
var $e = $(e);
$e.css('margin-left', $e.position().left % 1 === 0 ? '0' : '0.5px');
});
});
}
}
Then just call window.resize() once your flash has been set up.