I'm trying to use the Onsen-UI with sliding-menu and when I test on device (Android) I see a delay on transition between pages/navigators.
The previous page appears a little bit until the new page is changed.
Did you use the project template provided by Monaca? I am using Android device (2.3), but no such effect appears.
Related
I've done some research before come here to ask help, but this issue it's so weird that I can barely describe it to find for some help. Well, I coded pagination logic on my own using React. After finishing I've tested it on Windows using chrome, working fine, on Android using chrome and samsung browser, also working fine...but on IOS using both safari and chrome, when moving through pagination, it scrolls to the new image that is loaded breaking the scroll to the top that I implemented, this video sums up everything:
https://www.youtube.com/shorts/o3aDHOvDIto
You can see that everytime I change pagination it jumps to the image and then scroll to the top, after I cycle between all the posts, this behavior stops and the pagination do what I originally intended, scroll to the top after user select position of the pagination.
You can check it by yourself on you ios device (I was using iPhone 13)
https://hosana.dev/blog.html
Also here is my source code
https://github.com/diegodiego1989/hosana.dev-blog
What I'm doing wrong? Thanks in advance.
To be honest I have no idea on why this is happening.
Because 2sxc Accordion App have in settings "Initially open/close" switch for each section, I wonder is it possible to tweak this in some way to get Accordion initially open for desktop page view and initially closed for mobile page view?
It would save space / scrolling time and look more appealing in mobile page view.
Or just take this as idea for some next version of this App.
This would be fairly easy to do. I suggest you do the following:
The toggle for open/close could be replaced with the boolean-tristate, so you have a true (open), false (closed) and null (automatic).
Then adjust the razor code a bit to make this happen.
If you got it to work, it would be awesome if you could contribute your code to the app in github: https://github.com/2sic/app-accordion
I'm creating a third-party app, which is loaded through an iframe.
The iframe creates a draggable element in side it.
On first page load (before scrolling the page), the draggable (slider) works fine.
But after scrolling the page behind the iframe, it's hard to get the slider to slide again.
(Note that this is a mobile issue, safari on iOS especially, but also chrome on iOS)
In the following demo I have used the GSAP Draggable library with react to create the draggable element but have also tried to code it in plain react with no luck.
Here is a demo: https://unfjl.csb.app/
I have tried a lot of different things (css, touchevents etc), but cannot get it to work...
What could cause this behaviour?
Update (no iframe example)
Demo no iframe: https://p5cu9.csb.app/
Same example with slider as above, but in this example the draggable is rendered directly in the DOM and not in an iframe. The problem still occurs. I suspect it has something to do with the fixed css position of the slider...
This is gonna sound really strange, but a bug in iOS Safari causes that and the only way I know of to get around it (which I discovered today via Googling) is to add a "touchstart" listener to the of the top-level page (not the iframe)!
document.getElementsByTagName("body")[0].addEventListener("touchstart",function(){});
That isn't something I can add to Draggable because it wouldn't be able to access the parent document (outside the iframe) to add that properly (security restrictions in the browser).
You could also add a touchforcechange listener that prevents the default behavior (I'll be adding that to Draggable itself too):
yourDraggableElement.addEventListener("touchforcechange", function(event) {
event.preventDefault();
});
Browser bugs are fun, aren't they?! ;)
(Originally answered in the GreenSock forums at https://greensock.com/forums/topic/21450-draggable-in-iframe-on-mobile-is-buggy/?tab=comments#comment-101225)
I have an Angular web app which have to be responsive. To do that i use Bootstrap and its responsive grid system.
In every page I have to interact with users to set app, or simply change page. For that, I use ng-click and ng-href directives.
I have tested it many times, it works great except when my device screen width is close to phone portrait's width. I noticed this issue when i use chrome dev tools phone emulator and check on my phone a Wiko.
Have you any clue about this problem ? it's kinda weird, isn't it ?
EDIT : I added ngTouch to my app, but no change.
I discovered that my ngclick item was behind div with no ng-click directive when on small screen device.
Just fixed it by revising my responsive.
It is possible to disable the opening animation of the ons.screen.presentPage() method?
I'm trying to use a login page as a modal window when the app is launched and I don't want the up animation, only the down animation...
Sorry, the current Onsen UI ver 1.0.4 has no method to disable the animation.
We plan to make it possible at the next version.