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.
Related
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
I am trying to implement image zooming for image in Ionic app.
It has been implemented here
and works flawlessly on the original project created with Ionic V 1.0.0 but doesn't seem to work all that good in Ionic V 1.3.0.
On V 1.1.0 this
($ionicScrollDelegate.$getByHandle('scrollHandle' +
slide).getScrollPosition())
logs a json like this
{"left":0,"top":0,"zoom":1}
But in V 1.3.0 it logs it as
undefined
Also on chrome it shows warning like this:
Delegate for handle "scrollHandle0" could not find a corresponding
element with delegate-handle="scrollHandle0"! getScrollPosition() was
not called! Possible cause: If you are calling getScrollPosition()
immediately, and your element with delegate-handle="scrollHandle0" is
a child of your controller, then your element may not be compiled yet.
Put a $timeout around your call to getScrollPosition() and try again.
This is still working on devices (tested both on iOS and Android) but not smooth at all. It is very laggy.
Any thoughts or workarounds?
So the issue had nothing to do with Ionic version which I realised after more debugging. It was due to
delegate-handle="scrollHandle{{$index}}"
In my usecase I was not using ng-repeat so was using
delegate-handle="scrollHandle"
But this was not working and causing the above mentioned issues. So fix was to add 0 as index with it. In my case this solved it.
delegate-handle="scrollHandle0"
In other cases use case may be different so but if using ng-repeat this would work
delegate-handle="scrollHandle{{$index}}"
and if not this should do the trick
delegate-handle="scrollHandle0"
I want to make a website ie 6 compatible. I have included two PNG files (PNG-8) with <img src> tag. When I open the website with IE6, the pictures appears for a short moment and disappears again. How can I fix that without any javascript or other additional files?
If adding JS is really not an option, you can try using the following filter:
img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}
I would, however, not recommend this... the JS methods are generally better.
You can't do that without JavaScript or additional files.
IE6 does not support natively transparent PNG.
Here is a fix: http://www.twinhelix.com/css/iepngfix/
ie6 does support transparency in 8bit, just not 32bit that most people use. and the support is not 100%, partial transparency will show as transparent, but the fact remains that you can get transparency in ie6.
you could create a gif specifically for ie6 and serve it up via conditional comments...that sounds optimal for what you are doing.
there are also a number of JavaScript and/or HTC solutions
I have been racking my brain trying to figure this out and I have searched all over this site and others and have found numerous solutions, none of which have any effect. I have tried the viewport meta tag in numerous configurations, I have tried removing the fb-root div, making sure there is no height=100%, and so on... nothing seems to make this page open at full width and size.
Figured out the issue... I literally went file by file and just noticed this little tid bit of code in one of the Highslide files (mobile.js)... simply removed and now all works like I wanted it to.
// Add a meta tag to have the iPhone render the page 1:1
hs.createElement('meta', {
name: 'viewport',
content: 'width=device-width; initial-scale=1.0; maximum-scale=1.0;'
}, null, document.getElementsByTagName('head')[0]);
I am seeing a weird issue in Internet Explorer 9 on my Facebook pagetab when I have setAutoGrow to true. The height grows continuously without end. This is only happening in Internet Explorer for me. Tested with Chrome and Firefox as well.
An example can be found at https://www.facebook.com/GunSweeps/app_480125662005248
Any ideas on what could be the cause? I read another thread on here that suggested it was html, body being set to 100%, and another which said a top-margin was the cause. I'm tried both of these remedies to no avail.
Edit: In more searching, I saw that a global variable might have been the issue, but went through and that does not appear to be the cause either.
Thanks ahead of time for any ideas.
May be you can Try
FB.Canvas.setSize();
After all your contents load
or use a simple timer
var resizetimer= window.setTimeout(function() {
FB.Canvas.setSize();
}, 4000);