I have made a video of the issue: https://drive.google.com/open?id=10AhL2KUZpQJpsnkjuP_3y46mu3lQ0dTZ
You can see that the scrolling is working fine. And I can also use other buttons and fields just fine. The issue is only on iOS (both in the simulator and on a test device), but not on Android or in the browser.
I'm using ionic 4 with angular and cordova.
The code is as follows:
<ion-content>
<div id="shop-wrapper">
<iframe scrolling="yes" id="shop" src="http://shop2.boettcher.ch/de/schnelleingabe.htm"></iframe>
</div>
</ion-content>
And the css
#shop-wrapper{
-webkit-overflow-scrolling: touch !important;
overflow-y: scroll !important;
height: 100%;
width: 100%;
}
#shop-wrapper iframe{
height: 100%;
width: 100%;
}
I gave you the proper url so that you can check that there is nothing unusual on the buttons.
I have been on this for days and desperately need some help.
Related
I have searched and tried every possible example I can find. Here is my goal. I have a starter template for tabs. Each tab will open an page that will load a different path from a remote domain (using https) via an iframe. In android, it works as I would hope. In IOS, from what I have read, the iframe "height:100%" actually goes to the height of the content in the iframe, instead of the viewable area on the app, so the fixed header scrolls with the page, because for all it thinks, is that you have a really tall screen. What I need to happen is when you scroll, the fixed header stays at the top. Here is the code:
Component for Tab HTML
<ion-content >
<div class="iframe-fix">
<iframe
[src]="myurl"
frameborder="0"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen
></iframe>
</div>
</ion-content>
From the forums I found a few tricks that should work, and created this css file that I include in the index.html:
.iframe-fix iframe {
-webkit-overflow-scrolling: touch !important;
overflow: scroll !important;
width: 100%;
height: 100%;
border: none;
margin-top: 40px;
}
.iframe-fix {
overflow: hidden;
width: 100%;
height: 100%;
border: none;
background-color: #fff;
}
Would appreciate any help/suppport. Thanks!!
Jssor slider:
Is it possible to move the social links div above the image, while keeping it responsive with the image. The demos have the social bar on top of the image. I have done this & it appears to work correctly in all current browsers, with the exception of resizing issue only in IE. Can it be done?
I noticed that it doesn't display in ie 8;
Please set z-index 10 for share button navigator as follows,
<div u="any" style="position: absolute; display: block; top: 6px; right: 16px; width: 280px; height: 40px; z-index: 10;">
so for my website http://vea.re I have setup some css to have each section be 100% of the browser screen size. It works very well on the desktop browsers but on iOS it just does not seem to work. Dou you have any idea why? Actually it does not work on webkit/Safari either. Latest chrome has already switched to blink?
The way it is setup is so:
body
#container
section
The css is the following
html, body{
height: 100%; position: relative;
}
#container{
float: left;
width: 100%;
height: 100%;
min-height: 100%;
}
section{
display: block;
width: 100%;
min-height: 100%;
position: relative;
}
I am using min-height because sometimes the section is bigger than 100% of the screen.
It works without any problems on the desktop, but not on my iphone or ipad.
I need a css only solution, I had it working what javascript before, but it is rather suboptimal because of loading times and such.
Okay, it seems to be working with height: 100% instead if min-height and I do not know what I changed but now it does not cut off the sections if they are longer.
There's an iframe, which basically has more content than fits into the frame. The sizing of the frame is based on the browser screen size and lets the overflow scroll, which works perfectly on all browsers, except for iOS. On iOS, safari decides to resize the frame to fit the content. Not what you'd expect.
Example code on jsFiddle:
http://jsfiddle.net/R3PKB/2/
Try it out on your iOS devices:
http://jsfiddle.net/R3PKB/2/embedded/result
The HTML:
<div class="frame_holder">
<iframe class="my_frame">
// The content
</iframe>
</div>
The CSS:
body {
position: relative;
background: #f0f0f0;
}
.frame_holder {
position: absolute;
top: 50px;
bottom: 50px;
left: 50px;
right: 50px;
background: #ffffff;
}
.my_frame {
width: 100%;
height: 100%;
border: 1px solid #e0e0e0;
}
You can make it work by adding a wrapping div with overflow: auto; and -webkit-overflow-scrolling:touch;.
Here's your example with it: http://jsfiddle.net/R3PKB/7/
According to previous questions on SO it's a bug since iOS 4. I found more info here:
https://stackoverflow.com/a/6721310/1047398
iframe on iOS (iPad) content cropping issue
This is an old question, but since it comes first on google and the issue exists on nowadays ios devices, I repost a better fix that I found on this page:
How to get an IFrame to be responsive in iOS Safari?
Basically, if you have an iframe with scroll (let's say a twitter widget), the solution above won't work very well because it makes the parent scrollable. The fix that worked for me is replacing height: 100% with height: 1px; min-height: 100%;.
If iOS Safari is displaying your iframe content from a different origin than expected (i.e. it is shifted over by some pixels), try adding scrolling="no" as an attribute to the iframe. This should prevent it from automatically fitting its content.
More here.
using height: 1px; min-height: 100%; did not work for me, though I did not need a scrolling element. I had to use the overflow:auto; on a surrounding div instead. Note that this method is discouraged as it may have unintended consequences, but I tested on Android/iOS and desktop browsers and could not find any issues yet. fingers crossed.
This is a nice post from Andy Shora on some iOS iframe nuances: http://andyshora.com/iframes-responsive-web-apps-tips.html
I have included the Facebook like box code on my website. However for some reason when viewed on an iPad the embedded Youtube links show outside the iframe (the other content does not). I have tried wrapping this with a div and applying overflow: hidden but still no joy.
It works fine on all browsers on the PC (including Safari) and as such I cannot figure out where to go with this one.
Usually with embedded videos I include wmode="transparent" in the embed code which usually sorts it. However because Facebook generates the code so I cannot access the content generated in the widget.
Any help would be much appreciated, as I have been banging my head against the wall about this for days.
Cheers
HTML
<div id="fb-root">
<iframe id="facebookscroller"
src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FMorgan-Motor-Company%2F209507192406727&width=450&colorscheme=dark&show_faces=false&border_color&stream=true&header=false&height=395"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden; width:450px; height:395px;"
allowTransparency="false"
wmode="transparent">
</iframe>
</div>
CSS:
#fb-root {
position: absolute;
top: 50px;
right: 10px;
z-index: 4;
height: 395px;
overflow: hidden;
display: block;
}