I'm creating my first web app using React and I've implemented some 3D animations using React-Three-Fiber.
I've already deployed the page in github pages and while in Chrome on the desktop, both in the webpage and in localhost the website works flawlessly (has some freezes but that's not the point).
However, when I visit the page on an Android Phone, all the Canvas stop working and display the text multiple times whenever I scroll (I don't really know how to explain what's happening, so I'll leave this video: https://youtube.com/shorts/O0xXEElAjJs?feature=share . You can see that the problem only exists on the Canvas, since the Header is not a Canvas element).
I've tried to load the page on iPhones but it doesn't even load and just crashes.
On two of the Android phones I've tried, the page loaded nicely at start but after some time it started glitching like in the video.
I have absolutely no clue on what is going on, other than the problem lies on the Canvas that I have created.
I assume this is a simple thing that I might have missed but I'm really lost.
Thanks in advance! :D
Here is the webpage: https://pedrochaps.github.io/
Here is the code: https://github.com/PedroChaps/pedrochaps.github.io
Related
My website is in AngularJS v1.7.2 (using Laravel PHP framework as backend).
Current issue is the website freezes after resizing several times (2-3 or more times). I have checked Google chrome Task Manager Tool and it showing around 100% of CPU usage at the time of freezes. Same issue also occurred while testing the site in mobile by changing orientation several times. I have already tried solution like bind one way, add track by for ng-repeat, using tools like Batarang but no luck yet. Is there any proper solution for the issue. Please let me know.
UPDATE
The website almost finish. Only the freeze issue currently blocking us. The website mainly containing song, album, playlist, artist.
On home page there is banner (4 images) using iosSlider . then there are per category (8 categories) album (5 album each). on right sidebar there are song list. There are other pages like category page, artist page, album page, song page, user profile pages etc. Also there is a customised player using angular soundmanager2 API. Generally while viewing in desktop normally there no issue so far. But if I check using Device Toolbar (CTRL+Shift+M) and switch to other pages and rotate 2-3 times it just freezes. Even can't reload or refresh the page tab. If I check Chrome Task manager (Shift+Esc) it shows around 100% CPU usages
that time. Thing to notice the issue only occurring if I route to other page(forward or backward or both) then rotate 2-3 times. I am using AngularJS Batarang to sort out the issue but with no clue still now
SOLVED
The issue was with iosSlider. After removing the iosSlider no crash issue now.
I'm looking to embed an existing survey monkey survey into a webpage, following the instructions here:
http://help.surveymonkey.com/articles/en_US/kb/Website-Collector
which is working perfectly on desktop and tablet sizes, but for some reason not working on mobile (either on an android device or in chrome emulator)
The following steps appear to be working:
Loading embed script into the page
Embed script calls surveymonkey.com, and retrieves the SMCX script
SMCX.boot() is called
But, the survey (or its markup) does not appear in the page.
Has anyone else run into this issue? What other additional information can I provide?
The Website Collector used to work everywhere, but they changed their API and now document that mobile is not supported.
http://help.surveymonkey.com/articles/en_US/kb/Website-Collector
"Website Collectors display on desktop browsers only—not on mobile devices or tablets."
It's actually worse than not supporting mobile or tablets, their surveys don't even load on desktop browsers if your browser is currently 760 pixels or less wide.
The solution is to just iframe the web link in manually.
<iframe height="500" width="500" src="https://www.surveymonkey.com/r/XL3DDMS"></iframe>
In addition to the answer of using iframe, for iPhone, both in Safari and Chrome rendered a weird view (the spacing between each question is extremely large), and I finally tackled it by turn off the "One Question at a Time" option, hope this helps someone.
I finally finished my phonegap app. I put the config.xml file and all my html, css and js files in a folder and uploaded it to phonegap build. I downloaded the ipa file to test it on my iphone.
The app has a page where articles are loaded from a json page that I am hosting on a server. The articles load properly. However when I hold the screen and scroll up or down, the screen starts shaking vigorously. I looked at other forums to see but all I found is DisallowOverscroll. But DisallowOverscroll set to true makes sure that the screen doesn't bounce if scrolled entirely to the bottom or to the top. But my problem is once I put my finger on the screen and scroll down, the page starts shaking up and down. I tried everything for the past two days but nothing worked. Any help is really appreciated.
I also made a video to make it easier. https://www.youtube.com/watch?v=O-Nd4ntZ46E
EDIT: I figured that the problem is arising from pull hook feature (pull to refresh. When I tested the page without the pull to refresh hook, it is working absolutely fine. But I am not sure how to use pull to refresh hook and not make the page judder at the same time.
Theres a mistake on your resolution for iPhone 6, it should be 750 x 1334, also check the image file is the correct size too.
You'll need to show code for the other problem.
I'm building a responsive website at the moment and the main site navigation contains 10 links. I've seen a few sites that compress their navigation into a simple drop down select menu when the screen size gets below 480px, but I can't find any tutorials out there that explain how to do this - apart from the CSS Tricks one here:
http://www.css-tricks.com/convert-menu-to-dropdown/
I've tried this tutorial but not had any success with it as I implemented the code and yes I get a lovely menu on the iPhone, but the links don't work and clicking on it makes the page zoom in which is not desirable as this doesn't happen when I don't have the menu in place.
I'm looking for something simple like used on these websites:
http://www.hanselman.com/blog/
http://www.lancs.ac.uk/
anyone?
I managed to find this snippet of code on http://www.w3schools.com here:
http://www.w3schools.com/js/tryit.asp?filename=tryjs_selectmenu
Implemented it and it works just fine - just had to add action="" to the form tag to get the page to validate.
I created a video player using Silverlight (mediaElement) and it works fine with IE in Windows. Now, I am trying to get that same stuff to work on the Mac. So, in my Cocoa app I have a WebView and I load that *.xap. Click events work fine, but I am not able to view the videos. If someone else has faced the same issue, please let me know what mistake I have done.
P.S. I had the same issue with Windows. I solved it by running the Web Project as the Startup project.