Having very inconsistent results in viewing PDFs on the iPad Air (ios 7.1.1). Memory consumption and CPU usage doesn't seem to be an issue. Getting black boxes and sometimes app crashes when viewing PDFs. Also it doesn't happen on the iOS simulator, but only the actual iPad.
Heres some screen shots.
This is how I'm opening the PDFs (using angular):
$scope.openPDF = function(pdfName) {
var ref = window.open('img/pdfs/' + pdfName + '.pdf', '_blank', 'location=no');
};
Also, it seems like others are experiencing this problem.
https://discussions.apple.com/message/24129741#24129741
https://discussions.apple.com/message/23480067#23480067
Any direction would be much appreciated.
EDIT: This is still an issue. inAppBrowser does not fully garbage collect memory on PDFs
Apparently this is related to an HTML5 Video memory leak bug.
inAppBrowser does not do garbage collection properly if an video tag exists on the page. Ended up removing the tags and everything seems to be working properly.
I also ended up using an inAppBrowser Extension plugin for some of the extra options, it seems like all the options from the official plugin are still supported which is nice.
I initially filed a ticket and closed it.
This is the thread where the HTML5 Video tag leak is discussed.
From my research I cam to the same conclusion as #ChristopherMarshell that it is to do with a HTML5 video tag memory leak. Instead of using inAppBrowser to do the PDF document you could use Google docs, similar to:
window.open('https://docs.google.com/viewer?url=http://www.example.com/test.pdf&embedded=true', '_blank', 'location=yes');
This opens the PDF in Google docs and you shouldn't get any black boxes :)
Related
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
I'm currently working on a eLearning website where I use html5 video tag to show video tutorials to my users. I'm using the video streaming technique explained here:
https://getpocket.com/redirect?url=http%3A%2F%2Fstudentguru.gr%2Fb%2Feloy%2Farchive%2F2015%2F07%2F13%2Fvideo-streaming-for-mobile-clients-via-asp-net-web-api-2-tutorial.
After I implemented this solution everything works fine, but after a while I realized while video is playing using html5 video tag in chrome, other requests that are sent to the same server, stays pending for a long time. I don't have this issue on other browsers link Firefox. This is because of a specific bug in chrome (https://github.com/videojs/video.js/issues/455). This is a major problem for me because while users are watching videos on my website, I use ajax to save their progress and this issue prevents that. Do you know any workaround to fix this issue? I have used solutions in HTML5 video element request stay pending forever (on chrome) and none of them solved my problem.
Thanks in advanced.
I'm using materializecss.com and angularjs for my website. The problem is quite interesting:
When i use Chrome and resize my website, everything stays responsive (not perfectly tough). But when i use the Chrome Emulation tool (with Apple iPhone 6) its not responsive anymore.
Have a look at the screenshots:
So you can see the different scale.
You can have a look at it at zencubes.io
Any ideas?
The description of your problem sounds like it's been answered here previously at Stackoverflow here, where it works in the device emulator in Chrome but not on the actual device itself.
Why CSS Media Query doesn't work on mobile device but yes on Google Chrome device emulator?
Have you checked your Viewport meta tag settings, in particular the width attribute?
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'm developing a web application with AngularJS and I'm using a directive for embedding responsive Youtube videos called youtubeResponsive which allows to embed videos in an iframe with a video id as source parameter.
It all works perfectly on desktop browsers, in fact I also managed to embed a playlist and play it in a loop.
The problem I'm having is now on Chrome Android, on a Nexus 5 device (running Lollipop latest update) the video embedded is not showing and instead I can see a notification of a download going on. Every time I refresh I see the download process restarting but no video is showing. If I click on the download notification to see the file nothing happens.
Of course my aim is to display the video also on mobile with autoplay and loop active.
The output which I can see inspecting the page on mobile using USB debugging (chrome://inspect/#devices)
<iframe id="ytplayer" type="text/html" width="100%" height="202.5" ng-src="http://www.youtube.com/v/ZhfUv0spHCY?version=3&autoplay=1&loop=1&controls=0&showinfo=0&rel=0&wmode=opaque" frameborder="0" allowfullscreen="" video-slug="ZhfUv0spHCY" class="ng-isolate-scope" src="http://www.youtube.com/v/ZhfUv0spHCY?version=3&autoplay=1&loop=1&controls=0&showinfo=0&rel=0&wmode=opaque"></iframe>
I don't see any error on mobile except the same warning I can see on desktop which apparently is not blocking the video from playing at least there.
Resource interpreted as Document but transferred with MIME type application/x-shockwave-flash:
"https://www.youtube.com/v/ZhfUv0spHCY?version=3&autoplay=1&loop=1&controls=0&showinfo=0&rel=0&wmode=opaque".
Anyone experienced the same issue on Android Chrome or on other mobile devices and OS ?
I haven't started testing on AOSP or iOS yet but already on Chrome the issue is quite concerning. Let me know if anyone managed to fix it.
You're specifically requesting the old Flash player widget and not allowing it to upgrade to HTML5, which is required now for mobile support of any kind. You should switch to the YouTube Player API, which requires a few extra lines of code to implement but will work almost anywhere and give you a lot of event data back about videos playing, etc.
https://developers.google.com/youtube/iframe_api_reference
You can still use an IFRAME with this technique, although consider this directive which appears to support the current API:
https://github.com/brandly/angular-youtube-embed