I use React router in my Ionic 5 project and it's working fine, unless the page transitions.
Pages are blank as long as the transition is not completed. This happens in Chrome on my Macbook as well as in Safari on my iPhone.
Screen recording video: https://drive.google.com/file/d/1bHyf6i_j92CcGPQzEYjM4CmEAdeXhrNJ/view?usp=sharing
How to solve that? Thanks in Advance!
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
Before posting this I passed one full day to understand this bug but without any result.
Here is the link to web application that Im developing : https://yd-chauffeurs.vercel.app/
This BUG is happening ONLY in SAFARI. Please use SAFARI to reproduce. In other browser it works perfectly.
Open Home page and click on CONTACT after the contact page is opened click on ABOUT (A PROPOS in french) or GALLERY. You will see that SAFARI doesn't scroll to that section which is marked with id.
When you are on Home page and you click , all Links work perfectly and they scroll to necessary id.
But when you are on another page like Contact or FAQ, Safari doesn't scroll to About or Gallery.
I can't figure out why.
Thank you for your answer.
Today I finally managed to resolve the issue. I resolved this problem by giving min-height to service section.
The problem was that Safari was not charging all DOM elements so it was starting to scroll to the section but when DOM was fully loaded the scroll was pushed upper. So I gave min height to service section and now it works perfectly.
Thank you again.
I checked in Safari Version 14.1 (Desktop) but cannot reproduce the problem.
In Chrome, default page scroll sometimes show and sometimes not during the page navigation in the angularjs. Chrome version is "Version 52.0.2743.116 m".
I Googled on it and found that one of the old version of Chrome had this issue and in later version it was resolved.
Any helps will be appreciated!
Thanks in advance.
I am currently experimenting on a hybrid app using ReactJS for my front-end loaded inside an Android WebView. On one of the pages, I have a list that loads an external/hosted image. Tapping on these images routes to another page that shows its description (using react-router. history=hashHistory).
Testing on the browser(chrome), the images appear once loaded. On the other hand, testing on the actual device, the images does not appear. Only when I tap the list item and press back (hashHistory.goBack) that it appears.
I know this is not the best use for ReactJS, but this is better than what we are currently using. Also, our current setup prevents us from pursuing the React Native way. Any ideas?
EDIT:
here's a screen cap:
You need to change your websettings in your code.
WebSettings settings = webView.getSettings();
settings.setDomStorageEnabled(true);