When you open a website in LinkedIn's app (iOS), html5 background videos set to autoplay do not play, and animations do not fire unless you stop scrolling. So, it often looks like there is a bunch of empty space when you use fade and slide animations.
Here are a few examples (you must view within LinkedIn's app to see the issue)...
Background video
https://jobs.netflix.com/
https://thelovinggroup.com/ (also has animation issues)
Animations
https://voidwatches.com/
http://www.clearmotion.com/
Any thoughts on how to tackle this issue until LinkedIn builds a better browser?
I've looked into browser detection as a possible solution. Thinking maybe I could do an if/else statement to check if it's a common browser (Chrome, Safari, Firefox, etc.), else do something else with those videos and animations.
But everything I've read for browser detection strongly recommends against using it unless you absolutely have to (https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent).
Any thoughts would be very much appreciated!
UPDATE
Ok, so I've implemented the code from this Github project to detect UIWebView: https://github.com/simpleweb/UIWebView-Detect
And it works well! However, I really need to differentiate between LinkedIn and other apps with WebView because LinkedIn is the only one with these issues.
I used Udger's parser (based on what I found in another Stack Overflow post): https://udger.com/resources/online-parser
And I can see that Facebook has its own browser, but LinkedIn seems to be using some version of Safari.
I feel like I'm starting to get closer, but I'm still not sure I've come up with a solid solution.
Related
When clicking a website link from within the Facebook iOS app, the page loads fine (within the in-app browser). But then when you scroll down and then back up, the top is cut off. This is a problem for website with a nav bar at the top, like amazon.com. Is there a workaround for this? One that does not involve the user having to disable the in-app browser. This is aweful when you realize you've spent money sending people to a website they cannot use.
Update: This seems to be an issue with a slightly older version of the Facebook App for iOS. In the newer version of the FB App, this is not a problem.
Even still, I'd like to know if anyone has experienced this and if so, is there an HTML, javascript or jquery solution to the problem. I know I can detect the FB browser, maybe even the version of the in-app browser. But still, what to do then.
I think I am going to try using frames. I guess I could pad the top and bottom.enter image description here
I am trying to achieve a Digital Signage using Raspbian OS on my Raspberry. I set my r-pi to open in kiosk mode chromium browser and to shows a slideshow od ads and scrolling news within my web application.
I created the ads slideshow using jquery image slideshow and scrolling news with marquee html tag.
The result is jerkily scrolling news.
I think the problem is due to the couple "jquery-marquee" because if I run only jquery or only marquee it works!
Can you give me some ideas?
I thought to only use CSS3 to realize scrolling news and scrolling ads
UPDATE: You can see my work here
From normal browser it works. From chromium v.22 on raspbian-raspberry it is a disaster.
I have already choosen little images (not bigegr than 200kb) but the problem remains.
I utilised jquery image slideshow and jquery.marquee
I hope you can help me to solve this issue.
I just read a bit from http://blogs.wcode.org/2013/09/howto-boot-your-raspberry-pi-into-a-fullscreen-browser-kiosk/ and noticed:
Optional bonus Step 4: Accelerated X11 Server
Currently (Sep 2013), the default X11 server isn’t exactly optimised
for the Raspberry Pi; however, work is afoot and you can install a
work-in-progress version fairly easily. This has worked for us and has
been nice and stable. YMMV.
UPDATE: Comments have suggested possible problems with newer Rasbian
releases. We’ve not verified this either way. You don’t need to
install this, everything will work just fine without it; at the time,
we were trying to squeeze every last ounce of performance from the Pi,
so it seemed pertinent to install this patch.
The blog mentions an accellerated X11 server
https://github.com/simonjhall/fbdev_exa/ , or in particular
https://github.com/simonjhall/fbdev_exa/tree/master/releases/20130401
Maybe following the instructions on that blog link might help.
I'm breaking my head for few days trying to solve this and can't seems to find answer.
I'm trying to build a proof of concept for video player using HTML5 that works on Android and IOS, the trick is that at certain times i need to display objects on the video itself.
Now i would normally use the Video on Canvas or Video tag to solve it and then just create a layer on that with whatever additional data i want synced and triggered by the timer (on my specific example i've used PopcornJS to trigger time-based events).
NOW, it works fine on normal desktop browsers and it works well enough for android
but it seems that Safari won't render it no matter what... it insist on opening the video in it's own player that disregard any additional JS/HTML.
Ref about the issue can be seen here.
Afraid it isn't currently possible on iPhone in Safari. I've been working on an interactive presentation web app and have encountered the same problem.
This question covers the problem of full screen only video on the iPhone. The answers mention the webkit-playsinline attribute but point out that it only works inside a UIWebView object, not in Safari.
Hopefully this will change at some point in the future.
What is the best way to find the cause of high cpu usage of javascript?
I have a script that simply loads photos from flickr in a thumbnail gallery. After they're loaded, nothing is being done (waiting for you to click them to display in a lightbox), but the cpu usage is still 25% or more.
I've opened firebug, clicked profile, waited a bit then clicked it again, but it says "No activity to report". If there was something going on, wouldn't it report? Or am I using this tool wrong?
I am doing this after everything is loaded, just to see what might be causing that high cpu usage.
Thanks,
Wesley
Edit: Seem to have traced it's origin.. It's not anything JS related, but CSS! WHAT THE HELL?
The issue is this:
I have a thumbnail gallery, I display a loading indicator instead of the thumbnail whilst the image is loading:
.thumbnail img {
display:block;
background-image: url("/images/ajax-loader.gif");
background-position: center center;
background-repeat:no-repeat;
overflow:hidden;
color:white;
}
If I remove this code, the cpu usage drops to 0,03% or something.. instead of 20%... Is this because of the animated gif that is still playing, but just covered up?
I did not know that animated gifs take this much from the cpu? Granted, it's doing that more than 20 times, but still. It was the same in safari/chrome as well.
I guess I should either not use the loading indicator thing inside of each image, or remove the background-image on a successful load of the image..
I have used over the last weeks the tool "dynaTrace AJAX Edition" (free tool) for analyzing web sites (not only JavaScript). It has some pretty good views that show the usage of resources. Give it a try to track down the part of the javascript (or other parts of the browser) that are the reason for high cpu usage. However the tool is only working with firefox and current internet explorer implementations, but when you use firebug, that seems to indicate that you are using firefox.
There is an entry on their forums page named "What else can impact Browser CPU Usage and AJAX Performance?" which gives some more hints that may help.
You could try Chrome/Chromium Developer Tools » Profiler, Start, reload the page, wait a few minutes and stop it. It would be enough data to have a clue of what could be the problem.
Another common issue with high cpu usage on browsers it's css animations, (as well as gif images). I've been stuck with a high cpu usage issue when developing a web application, it was weird that it only happened when the tab was active/visible, but when on background it didn't, and the problem were present on FF, Chrome and Chromium. Finally it turned to be animated Bootstrap Progress bar.
You could check this easily here http://getbootstrap.com/components/#progress-animated, open it on Chrome, open Tools » Task Manager, then Toggle animation on Bootstrap site and check cpu usage.
I guess this is not strictly an answer to the question, but a usefull tip to find the problem. Since I can't comment yet, I decided to post it as an answer as someone could find it usefull, let me know if this is such a bad practice.
Try to reload the page after enabling FireBug profile feature.
I heavilly used FireBug profile feature to do this. You can see which function is consuming most of the time. Great thing. Try this on other pages with simple javascript example. It should work well. If it doesn't work in your example, just post them a bug.
I have a site that uses javascript to launch a css overlay of a google map (see [link deleted because I can only have one at a time] and click the 'Enlarge' button under the map).
This doesn't work on the ipad. I believe it has something to do with this not being a link, but using the jquery live('click',.. approach. I need to fix this but I'm new to using the ipad and I don't even know how to step through the javascript to see what the problem is.
What kind of development tools are available for testing on the ipad?
Edit: My mistake. The link above works fine in the iPad - no problem bringing up the larger map. However the sister site http://lowes-realty.com/Stateline-Plaza_Enfield_CT-11.aspx is not working. What I need is a development system that will let me look at them both on the ipad (I really want to avoid emulating or spoofing).
Have you tried firebug lite?
http://getfirebug.com/firebuglite#Install
Have you tested this in google chrome? As google chrome is a webkit browser, you may be able to do the majority of your debugging in chrome, and iron out smaller issues on the iPad itself.
Edit:
Removed unnecessary comment about iPad.
The problem ended up being that I had a javascript error that aborted the script before I ever got to the jQuery code. Once I fixed that, I was able to use jQuery without making any special modifications for the ipad - awesome! I did not have to do anything with the swipe or tap events (sweet!).
However I was not able to get any kind of javascript debugger; I had to work this one out for myself. As of Nov '09 firebug lite crashed the ipad for me and there don't seem to be any developer tools build for testing the ipad. I tried several sites that claimed to perform the same way the ipad does in your browser and not one of them held water.
I have no reason to believe that there is a good option for debugging a site on an ipad (yet).
Edit A Year Later... I'm still looking for a good way to develop on an iPad. I just got Adobe Shadow up and running - it's not actually a useful tool, but there is potential (http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow). Right now (3-29-12) the code inspector is essentially non-functional (cannot view inherited styles, can't view elements without expanding the DOM from the body element, no javascript debugging, and much more).
I know that sounds hopeless, but it has one thing going for it that nothing else I'm aware of does: Shadow works with all existing mobile devices and its code inspector is independent of device and browser. So although the inspector sucks spectacularly right now, once they build some functionality into it Shadow could be a good solution. From their site:
Shadow will be updated regularly to stay ahead of web standards, web
browser updates and support for new mobile devices entering the
market, while incorporating user feedback to provide the best
functionality and experience possible.
~ http://labs.adobe.com/technologies/shadow/
I think the problem is that on the iPhone / iPad there are no clicks events generated but instead touch events (swipe, tap).
You can use something like jQTouch (you can start reading here Getting started and then proceed to callback events hint: tap==click).
If you have more to adapt you can also look at (and wait for a stable release) of jQuery Mobile
weinre lets you remotely attach a WebKit inspector (the built-in Dev Tools you use on desktop browsers) to a page running on your mobile device (iPad/iPhone/iPod/Android/BlackBerry 6/webOS) over WiFi.
http://phonegap.github.com/weinre/images/weinre-demo.jpg
JavaScript debugging is limited to console.logs, but it's better than nothing.
If you have an ICS device, Chrome Mobile lets you remotely attach a full-featured Inspector (with full JS debugging/breakpoints) over USB. I've been thoroughly thrilled using this tool with my Galaxy Nexus.
(source: google.com)