I have an ionic 1 app that uses $cordovaCamera to retrieve a photo from the user. Oddly, after the camera is opened (doesn't matter whether the user takes a picture, cancels, or picks one from library) the app renders incorrectly once it's closed. The status bar overlays the top of the view, and the bottom of the view overflows off the viewport. However, if you re-orient the device (go from portrait to landscape) it will fix itself.
Is there any way to force the app to repaint manually?
Extra info regarding the bug itself: I created a new ionic 1 app separately and copied the camera code over exactly and it does not have the same problem. Same versions of ionic, angular, ngCordova, and the camera plugin. So I believe the actual rendering problem is specific to my app. However, after a full day of messing around I can't figure out for the life of me what's happening.
We had the same issue with the cordova-plugin-statusbar version: 2.2.1
The solution was pretty simple. We downgraded this dependency to version 2.2.0 and everything worked as expected again.
To use an exact version of a cordova plugin, specify it in the config.xml of your project as in example below:
<plugin name="cordova-plugin-statusbar" spec="2.2.0"/>
Don't forget to remove ./platforms and ./plugins folders and to run cordova prepare after downgrading the plugin versions.
take a look at this plugin:
cordova-plugin-hidden-statusbar-overlay
just install it, and after calling the camera, run this code:
window.plugin.statusbarOverlay.hide();
The answer ended up being pretty easy: REMOVE the status bar plugin.
I was under the impression that the status bar plugin was needed to make it appear at all but this is not the case. The StatusBar plugin only lets you style it - but since iOS 9 you can only choose from 2 options anyway.
Remove the status bar plugin completely. Don't forget to edit your bower.json, config.xml, the initialization code in your ionic app that sets StatusBar defaults, etc.
Add padding or margin to the top of your app when the body element has the class platform-ios. Per the Apple Developer Docs:
Obscure content under the status bar. By default, the background of the status bar is transparent, allowing content beneath to show through. Keep the status bar readable and don’t imply that content behind it is interactive. There are several common techniques for doing this:
1) Use a navigation bar in your app, which automatically displays a status bar background and ensures that content doesn’t appear under the status bar.
2) Display a custom image, such as a gradient or solid color, behind the status bar.
3) Apply a blur to the content behind the status bar.
What you should end up with is the exact same appearance without the plugin.
Related
I am using react swiper from 'swiper/react' for multiple components on my website and it works fine for every component it is used for except for one page. I have a top nav bar that is used as a promotional text banner and it swipes using autoplay every 5 seconds. This navbar exists on every page of my website, it works fine on every page except for one. The problem I'm having trouble shooting is because the swiper works fine on localhost, but once pushed to production, the swiper on this page is barely shown. You can see in the image below, that 2 characters in the swiper are present, and you can see in this image that the swiper is working as expected on every other page.
NOTE: On refresh, the full text is present for about a second before it is skewed and hidden.
The wrapper component styles are positioned to sticky, has a set height, a larger z-index than its background, display is flex. The swiper modules include Navigation and autoplay, loop is set to true, slidesPerView = 1.
What could be causing it to work locally but not work when deployed to a server? Any ideas as to why this functionality is present?
If you need more information please don't hesitate to let me know. Thanks for any advice in advance.
This looks like a CSS issue to me. What do you use for styling? Also, what's different between your localhost styles and the production styles? Note the differences and try to figure out what's missing, if you're not willing to share your code. I've seen cases (especially when using Tailwind) of missing styles in production because a certain plugin removes part of the styles that it thinks that are not used. Those cases are solved by whitelisting certain classes, but I can't tell for sure because I don't know your tech stack.
After send a javascript build with androidTheme (override the default iOS theme), the output javascript apps works properly, just the "ActionBar" (Back,Menu) button do not appear (yes, there is Commands added into the form)
This make my build javascript apps with androidTheme cannot perform Command action or even "Back" command.
Any idea to solve this issue? If I use default iOS theme, the command is added automatically into the top/bottom bar.
This seems to be a continuation of the discussion here.
Generally commands are not portable unless you use the Toolbar API at which point they become cross platform. The iOS theme uses the StatusBar style to space the title so you can just set that UIID to 0 but if you build a native iOS app that might be an issue.
I use Ionic for my iOS hybrid application,
I want to create a custom header and use a background image for all pages.
I want to know is there any way to create a master page in Ionic + AngularJS for using in another pages?
The answer varies depending on how you've already setup your app. Probably the simplest approach is to use a background image with CSS on the body of the page. That is just one line of CSS, but you'll have to consider how that image works or displays on various device sizes or if your app is in portrait or landscape mode.
Ok. Starting over with this. I see that the SocialBoo theme has something similar in what I want to achieve. If I find that I can work and improve. I Added a new socialboo theme and created blank GUI. Assumed it would be a Commandbehavior but that didnt do the trick, so did adding tabs. Seems like those components are not for that specific bar... However did notice another issue.
How do I get the social actionbar as displayed in the socialboo theme? (Screen shot). Assuming those images etc are part of the default theme, right.
Also, If I create a TouchCommand = bar, title or native. It displays fine in Gingerbread but not ICS. DO you know why is that? (screen shot)
Thanks, in advance.
Those images aren't a part of the theme, they are a part of the specific demo. If you add a Tabs component to the center of the border layout UI you will get thee tabs where the "icon" property will allow you to customize the unselected icon and you can customize the selected icon as well. You can see the full source/resource file of the social boo demo in the docs and demos zip in the download section.
Generally customizing commands is a bit complex because of platform specific constraints, when running on an Actual Android 4 device we use the native ActionBar by default to provide the experience Android users are used to. This is hard for us to simulate so you will only see this properly in the device build. I suggest not relying on commands, it seems that what you are trying to achieve is easily doable with tabs and its possible that's why you had difficulties in your other question.
I'm creating a web app exclusively for the iPad/mobile-Safari. The homepage is a run-of-the-mill HTML/CSS page with 3 main sections. But once you click on either of the 3 main buttons, you are directed to a page constructed with 2 iFrames (one on top for Nav, one on bottom for Content)
The problem was that before either of these 3 pages loaded there was a quick flash of white color and then the page loaded. I tried hiding the visibility style of the iframe and then onLoad change it to 'visible' and that worked. But it worked only once, when the iFrame-constructed page first loads. Once it loads and I click on a link on that page, the white flash is back because the iFrame has loaded already so it's already visible.
I tried the obvious like adding a css style to the iframe with a background color (also tried an inline style) but the same thing happened. Any ideas on how to solve it? Thanks!
You can do this cheat:
<iframe src="..." style="visibility:hidden;" onload="this.style.visibility='visible';"></iframe>
In the content, you can catch all link and form:
document.getElementsByTagName("a").addEventListener("click", function(e){
window.top.document.getElementsByTagName("iframe")[0].style.visibility = "hidden";
});
Explain:
First time, your iframe is hidden, and you can see the background of your main page (not white of iframe)
After loaded, Javascript will make iframe is visible and you can see content and background of iframe.
When click a link inside iframe, a trigger will fire, and Javascript will hide iframe again.
I met that problem, and that a whole day to trying to fix, but I cannot except above way. You can meet that issue on Chrome, Firefox, and other browsers, not just on Safari Mobile.
I think the same with KimKha. But "visibility" does not work well sometimes, so I think using "opacity" is better.
<iframe src="..." style="opacity:0;" onload="this.style.opacity=1;"></iframe>
I came across this issue, found lots of solution like KimKha mentions..
None of the solutions assist in further page transitions in the iframe and hiding it really is not a good solution.
With lots of trail and error I came up with the following which fixed my IOS webkit iFrame transition white flash issue, ironically it's such a simple solution:
Just add this to your CSS
html{background:#000}
change the colour to your desired color.
It looks like what the ultimate issue with IOS webkit is when your iframe calls another page, IOS removes the body from the current page for a split second before rendering the content from the new page. by forcing the HTML to have the background colour (default will naturally be white) this fixes the white flicker.
Also note that if your server is set to not allow caching of the .css file providing the styles then you will always get the flicker.
In apache to ensure caching look at
ExpiresByType text/css "access plus 30 days"