Facebook in-app browser cuts off top of webpage - javascript

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

Related

Image carousel slow to load once hosted

I built a pretty simple website for a friend that is essentially an online brochure for a property listing and experiencing a bug. The site was built using just basic HTML/CSS/JS.
The bug is once I hosted the site, the image carousel is extremely slow to load only on Apple products and takes me reloading the page once after initially visiting the page to fix the lag. On Android and windows products it works fine.. Here is the link to visit to see what I mean:
http://armanicondoforsale.com/
Also for reference is my code here:
https://github.com/JenniferJGomez/Armani
Wondering if this is a performance issue or perhaps a bug only Apple products experience?

LinkedIn App Browser Issues: Background Video and Animations

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.

Trouble with Facebook in app browser, rest of the browsers working perfectly fine

First a little context. I'm a designer from the Netherlands with a love for code. I can find my way pretty ok in html and css and a little bit in php and javascript. I love the Stack Overflow community, it helped me so much and it still helps me every day in becoming a little bit better at coding!
I have never asked a question here at S.O. before, because I always found a way to solve problems, untill now. I literally tried everything and I really hope you guys can help me.
I have a hobby project: https://unboxguide.com
It is some kind of TripAdvisor for CrossFit Boxes (gym boxes).
It is a Wordpress website which uses several different plugins for some functionalities.
The site works perfect on desktop browsers like Chrome, Safari, Firefox, etc. No problem there.
Then on mobile, still no problem there. On Android with chrome, it works perfect, on iPhone with Safari, still shiny.
But then.... the horror starts.
The Facebook in-app browser. There is something completely weird there. If I post a link to the website on Facebook and you click on it in the Facebook app it will open the Facebook in-app browser. The website renders completely randomly. Sometimes it doesn't load fonts, or any of the layout (css). Sometimes it doesn't even load the images.
Some research taught me that it is some kind of webview of the internal Mobile OS browser. So on iPhone a webview of Safari and Android a webview of Chrome.
I tested the Facebook links on Android, no problems there. The problem only occurs in the Facebook app on iPhone.
If you want to see for yourself, post https://unboxguide.com on your Facebook (just do it privately, so only you can see it) and keep refreshing it. The more you refresh, the more random results you will get. It's so strange.
I've tried so many things: rebuild the whole CSS, killed all plugins, tried different themes and tried to build everything from scratch. I also tried different backups from a few months ago where (I thought) the problem didn't occur yet. Nothing helped.
I really really hope someone has had the same issue or understands the problem, and can help or point me in the right direction.
Thanks in advance!
PS: If anything is needed furthermore to help you guys figure out what the problem can be, please let me know and I can post more information.
Old question, late answer. If your website uses ajax and uses X-Requested-With header to detect ajax requests (or not) this could be the reason. Webviews most of time use the X-Requested-With header for something else, so your pages are displayed like Ajax results (without css, javascript etc) and not like full html page.
Hope this helps.

Force hide address bar in Chrome on Android

I recently developed a website that fetches mixed http/https content. Due to this, I always get the address bar displayed on top (It doesn't auto-hide like in other websites). Here's what I'm talking about:
This is the link to the website.
The content is fetched from various sources, hence filtering non-https content is not possible. And since the website is meant for reading, a non-full-screen display is painful for the reader. So, is there a way to force the auto-hide behavior?
PS: The website uses Twitter Bootstrap, if it helps.
PPS: I don't want to use the full-screen API, it'll be too heavy for this.
Check this has everything you need
http://www.html5rocks.com/en/mobile/fullscreen/
The Chrome team has recently implemented a feature that tells the browser to launch the page fullscreen when the user has added it to the home screen. It is similar to the iOS Safari model.
<meta name="mobile-web-app-capable" content="yes">
window.scrollTo(0,1);
this will help you but this javascript is may not work in all browsers

Lightbox-style dialog shows below YouTube movie on Mac OS 10.6

This is a "but it works on my machine" one and could be tricky:
I have a lightbox-style HTML dialog that shows a menu on top of a web page. It can be injected into any web page via a JavaScript bookmarklet.
One of my users is trying to use it on YouTube.com with the result that the flash movie is rendered on top of the dialog (a div with high z-index).
I can't reproduce this. It works just fine for me. The dialog shows up on top of everything else on youtube.com, the video included.
I had him save the page in Safari as Webarchive and send it to me. Even that shows the menu rendered correctly for me.
I use the exact same version of Safari (4.0.5/531.22.7) and Flash (10.1 r53, latest beta). Only difference I could find is that he uses Snow Leopard (10.6.6) and I "only" 10.5.8.
Has anybody noticed similar problems? I'm afraid that the usual wmode recommendation won't solve this (I tried & it works on my machine anyway)...
Thanks!
Mark
Turned out to be a problem with the combination of Flash Beta and Mac OS 10.6. I had the user revert to the latest production release of the Flash player and everything worked as it was supposed to.

Categories