I am developing an app, and it works 100% in android. In IOS I have 2 issues:
refresher does not work
<ion-refresher slot="fixed" #ionRefresh="doRefresh($event)">
there is a flicker when I touch the screen (may be related to background? I read some old posts about that)
ion-content.background{
--background: url(/bg.png) 0 0/100% 100% no-repeat;
}
I don't believe its relevant to this issue, but I am using vuejs.
I tested in various desktop browsers and it works as well.
So, we had 2 things here, and I thank #johnborges for following up
it was necessary to add the pullingIcon
link for Ionic docs
and the relevant paragraph
Using the iOS native ion-refresher requires setting the pullingIcon
property on ion-refresher-content to the value of one of the available
spinners. See the Spinner Documentation for accepted values. The
pullingIcon defaults to the lines spinner on iOS. The spinner tick
marks will be progressively shown as the user pulls down on the page.
the flicker, based on this link from stackoverflow I added a CSS DIV element instead of styling ion-content. It worked. I had to do a secodn CSS trick because one of my pages had fullpage slides and padding, but after that it worked
Related
As you can see from the images, the pager does not show in the IOS version of my Ionic App. The code must be right because its there in Android. Is there something I am missing?
<ion-slides pager="true" scrollbar="true">
Android
IOS
I am not sure if its ideal, but seems when I copied the options from here:
https://ionicframework.com/docs/api/slides#coverflow it worked. I assumed it would work with simple setup as I didn't need any other options...
It seems that the order in which components are rendered can affect the ios-slides pager in iOS, so you could try to make sure that it always renders at the end.
One workaround would be initializing a variable after the view is entered:
ionViewDidEnter() {
this.viewEntered = true;
}
And use it in your ion-slides to decide when to show it:
<ion-slides pager="true" *ngIf="viewEntered">
...
</ion-slides>
I'm working on updating an Ionic 3 application to Ionic 4. I'm having an issue with the app css not working. I copied everything within app.scss from the original application to global.scss in the new application.
When I load up the first page of the app it looks nothing like the original application. I thought this part was more or less copy/paste but I may be wrong. One thing I experimented with was a line of css I have that looks like:
ion-input.input {
margin-bottom: 0;
border: 1px solid lightgrey;
}
and changed it to
ion-input {
margin-bottom: 0;
border: 1px solid lightgrey;
}
The new application then seems to take the border into account. Is there some major css changes needed in this conversion? or am I missing something?
Yes there are major changes. Now that Ionic 4 is based on web components the insides of them are encapsulated.
This is so they can be dropped into any page and look how the developer expects it to look, rather than being messed up by the pages styles.
The web components expose certain settings that can be styled. These are listed at the end of each documentation page. For example with ion-input:
ion-input - custom css properties - Ionic Documentation
Here is a solution for the border, and here is a solution for margin. Unfortunately the reason this has to be changed in Ionic 4 is because the Shadow DOM is now being implemented. Here is more info on that. Cheers :)
As the title says. Here is the URL if you have an iPad - How can I remove the responsive width of the Comments Plugin for iPads? (bottom of page) http://dev.assessmentday.co.uk/aptitudetests_numerical.htm
I ran into this too. I've worked around it by manually adding the data-mobile attribute set to false if I detect this is on an iPad:
<script>
if (navigator.userAgent.match(/\biPad\b/)) {
document.querySelector('div.fb-comments')
.setAttribute('data-mobile', 'false');
}
</script>
This could be improved to handle other tablets as well, but the best way to do that depends on how Facebook auto-detects "mobile", which I'm not sure of. Perhaps based on display width, perhaps based on the presence of touch event handlers, or perhaps indeed by user-agent on the server-side.
I am having some trouble with a webkit bug [1]. Long story short, if an iframe has an ancestor with -webkit-transform: scale(x) the content of the iframe is scaled 2 times.
The platform on which this is happening is iOS5 (both in Safari and UIWebView). I have tested on iOS4, iOS6 and the latest nightly build of webkit and I can not reproduce it there. So the issue seems to be fixed in the newer releases.
I tried the workaround described in one of the bug comments [2] and it does not fix the problem completely. In order for it to work I had to first add -webkit-transform-style: preserve-3d and then inside a timeout add -webkit-transform: scale(x) to the same element. This would have been acceptable, but if any inherited property is changed in one of the iframe's ancestors, the workaround is nullified and the content scaled 2 times again.
Does anybody know any better way to work around this issue ?
Links:
[1] Link to bug : https://bugs.webkit.org/show_bug.cgi?id=15676
[2] Description of workaround : https://bugs.webkit.org/show_bug.cgi?id=15676#c10
I had the same issue and managed to resolve it this way:
webkit-transform: scale(x)
zoom: 1/x
Also you might want to have the same fix for scaling pretty much anything on Android 2.x
I still have an issue though on iOS5.1 that despite content is scaled correctly, if part of it was behind the visible viewport (under overflow: hidden), it still appears blank in scaled iframe.
This has surely been covered countless times, but I cannot find a working solution.
how do you get rid of the scrollbars in a Facebook iframe app in Chrome. Both IE & Firefox are fine.
Using the suggested CSS overflow:hidden, simply cuts off the content if its over 800px in height.
Even the Facebook Coca Cola iframe app has the content cut off!! see here
http://www.facebook.com/cocacola?sk=app_161193133389
this is what is also happening to my app in Chrome (v. 16.0.912.77 m)
add this to your canvas app's fb js:
FB.Canvas.setSize({ width: 520, height: X });
where X is the height you want.
If your app is fluid use:
FB.Canvas.setAutoGrow();
i had a similar issue: after adding FB JS SDK and
FB.Canvas.setAutoGrow();
i had to set
body{}
in css to keep the scroll bars from showing in chrome. In my case is was padding.
body{
overflow: hidden;
margin: 0px;
padding: 0px;
}
I would also try to set the size with a delay and experiment with it a little:
window.setTimeout("FB.Canvas.setSize({ width: 520, height: 1111 })", 2000);
Also don't forget to initialize Facebook with your app id ( FB.init ) before calling FB.Canvas.setSize or FB.Canvas.setAutoGrow.
You have to make a few tweaks to you app. First, add the following code to your page:
FB.Canvas.setAutoGrow(); to tell the Facebook SDK to resize the iframe if the contents is longer.
Add overflow: hidden to the <html> or <body> CSS
Check your app settings and make sure you have set the Canvas Width to 'fluid' and Canvas Height to 'fixed' (Go to Settings > Advanced > Scroll to Canvas Settings.)
All of these things should fix the scroll bars. If it doesn't, using something like "Inspect Element" in Chrome to see if something is causing the bars to appear.
There are various solutions you could try below. Please comment as to which one, or if none of them work and I will update this answer accordingly.
If you haven't already, try adding: body{overflow:hidden;}
You may also have javascript disabled.
Alternatively, you could set the fixed height for the app very high in the app settings, where it says: fixed[ ]. Also make sure that fixed is selected on your app settings.
If this happens on other apps, including that CocaCola page you mentioned, then it could possibly be the browser. Try updating. I use the Chrome 19.0.1084.56 and I have no problems, (except for me the height is always pushed to a 1200px maximum height).
Also look here: 'Choosing between Facebook iframe scrollbar or page cut off halfway' where there is a solution that you can try.
Edit: Also look here: 'Timeline page app height stuck at 800px'.
Edit: After some looking through the Facebook bug area, Facebook say this is not a bug on Facebook's end, therefore must be a problem in your code. (Source: 'https://developers.facebook.com/bugs/360687100649759')
If that doesn't work, then comment and say so and I will do some further research.