In my react / redux application, on click of a particular button, I want to scroll up at a particular position.
It's working fine in firefox, chrome and Safari. But it is breaking in Blackberry access browser.
Can someone provide me the solution for it . I have already used approaches like window.scroll, scrollTo, scrollIntoView,
jquery approach:
$('html, body').animate({
scrollTop: $("#elementID").offset().top
}, 2000);
and focus()
All these approaches are not working in Blackberry Access browser.
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.
This web App(reactjs) works fine on desktop and tablets.
However, when trying it on mobile browser(like Safari), the progress bar keeps flickering and refreshing like:
Please click to view the gif
I have tried on Safari and Chrome(e.g. iOS12-14 & Android 10-12), all display the same result.
Anyone know why this happened?
Or why the progress bar keeps flickering and refreshing on mobile browsers, but works well on desktop?
Seems like there is an infinity refresh did you checked useEffect / useMemo / Function Call. The only thing that i can do now, is telling you where you can possibly check in your code, but for a better understanding of your problem, should provide more info about your code or more techical information
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 am using the offcanvas plugin from Jasny Bootstrap to implement a menu. It works as expected on a desktop browser. However, on mobile (iPhone 6 to be exact) the menu does not dismiss if the user clicks outside the menu. On a desktop browser, when an offcanvas menu is displayed, clicking outside the menu area dismisses the menu. Am I missing something, is this a bug, or is this expected behavior?
I reproduced this problem comparing desktop Chrome and iPhone Chrome using the supplied Jasny Bootstrap menu sample:
http://www.jasny.net/bootstrap/examples/navmenu-push/
tyipss!
Perhaps, it's a bug, though it looks like I can reproduce it only on a real iPhone6 (not in Chrome dev tools).
You can hide the menu explicitly in its callback function, like here:
$('.your-menu-selector').on('shown.bs.offcanvas', function() {
$('.your-backdrop-element').on('click', function() {
$('.your-menu-selector').offcanvas('hide');
});
});
I'm implementing google maps api v3 in angularjs. I have two maps on the page: one shows the user's location and sits in the sidebar while the other allows users to add markers. This second map is only used in a form to add entries to the system.
It work fine in everything except mobile Safari on iOS 7. On an iPad running iOS 7 the side map works - ie: you can pan and zoom, but the other map is as if it's an image - no panning, zooming, or clicking to add a marker.
In the iPhone on iOS7 both maps are static, as if they're images. Debugging in Safari doesn't show any errors.
Debugging does show that they don't ever fire the click event to add markers.
The iPad on iOS6 is fine. Android is fine. Desktop browsers are fine.
I'm using Angular-ui ui.Maps to generate the maps.
I can't even think how to debug this further. Has anyone had trouble like this with iOS 7?
.
Is iOS7 mobile Safari the new IE? I've had quite a few issues now that only crop up on iOS7.
Update:
The Doctor was right. Here's the code to fix it:
$timeout(function(){
_.each(document.getElementsByClassName("gm-style"), function(e){
this.addEventListener('touchstart', function(event){});
});
}, 3000);
I get the sense that iOS7 Safari is a bit buggy when it comes to touch events.
I found this thread which talks about a specific touch event but I think other events have similar issues. `-webkit-overflow-scrolling: touch` broken for initially offscreen elements in iOS7