I have been able to get position: fixed working perfectly on a div outside an iFrame, but once it is loaded in an iFrame, position:fixed doesn't work anymore.
Is this a know issue (I haven't been able to find anything on the topic) or am I missing out an important piece of CSS, or meta viewport information? Is there a way to work around this?
Thanks!
Related
I noticed recently that every webpage I visit on iOS Chrome has an enormous blank space at the bottom of the page. The space is roughly equal to a full screen height (i.e. 100vh) and is located below all visible elements on the page. Basically I can keep scrolling the page until it's completely blank. The scrollbar also shows that the pages are much longer than their content would require.
All the pages I looked at behave fine on Android, on OSX, and even on iOS when I use Firefox or Safari. The issue seems specific to iOS Chrome. I'm not sure when this issue started but I've updated Chrome and it persists.
Is anyone else experiencing this iOS Chrome bug? I haven't found any info about it.
I created a dummy test webpage and just kept stripping it down to see what was causing the issue. Eventually I was left with a page containing only <p> tags and very minimal CSS (no positioning properties) but the extra space at page bottom still showed up. By adding a background-color to the <body> I could see that this extra space was within the <body> but there wasn't any element forcing the body to extend.
After much trial and error I discovered that if I disable Chrome's Smooth Scrolling this issue is resolved and all pages behave normally.
Solution: Load chrome://flags and set Smooth Scrolling to disable.
Seems odd that this would be necessary. Anyone know what's going on?
This is likely a Chrome bug (iPad). I also spent a lot of time debugging all the css and my components. End up event google.com it self has that mysterious white space (which is about the height of the content itself.).
6 hours gone, but it's a relieve to know it's nothing got to do with my codes.
iPhone with chrome is fine on my end
To stop the page from scrolling, in both x, and y axis, we use the overflow: hidden; attribute in css.
So if we apply this to the body,
body {
overflow: hidden !important;
}
this should work in your scenario!
Please make sure you have added this meta tag and the same attributes
<meta name="viewport" content="width=device-width,initial-scale=1.0">
And check your body tag CSS, there should not be height: 100vh and check your pages again by clearing browser cache or in the private mode.
I have ran into an iOS ONLY specific bug which i cannot seem to wrap my head around. I am currently rendering an iframe on a website which is fetching content from another one of my websites. The content in the iframe is displayed within a responsive slider. The slider works by getting the full width of the window and times that by how many slides there is.
To make it responsive it will recalculate the widths on jQuery(window).resize. At this point i would like to add that i have tested this on all browsers on pc and its fine, ive tried it on all android browsers and guess what, they all work fine. As soon as i take it to IOS for testing is where the problem begins.
It works fine if you visit the dedicated website. However, When you view the content through the iframe, the javascript code thinks that the window is being resized which means its constantly resizing (getting bigger and bigger) making it dissapear of the screen making the window continually wider everytime.
HTML
<div class="iframe-container">
<iframe scrolling="no" src="*url removed*"></iframe>
</div>
CSS
.iframe-container iframe{width: 100%; min-height: 560px; border: none;}
Im thinking that its possible related to the content within the iframe ignoring the meta viewport tag or something?
Im unable to post a link to the issue due to client privacy reasons.
If anyone could shed some light on this, it would be much appreciated.
Thanks,
Lewis
In case it's still relevant or for anyone brought here by search:
Find the element inside the iframe which makes the window get bigger and bigger. Add max-width: 100vw; to its styles.
This helped me to fix a similar issue which also occurred only on ios and only when the page was loaded in an iframe.
My Google Street View iFrame loads fine but when I touch inside the image of the Street View map the page jumps to the bottom. This only happens on my Iphone 5s as well as my IPAD.
If I click on one of the controls it does not jump - but as soon as I touch the screen as if I want to drag the view to look around the page jumps to the bottom.
This happens on two of my websites where I have embedded the Street View Iframe so it cannot be specific to the website.
Can anyone advise how to prevent this annoying jump?
My website is http://www.360tours.co.za
I have the same problem. It seems to be related to iOS 10. Testing on the ipad3 with iOS 9.3.5 it works fine. Embedding it in a simple html page with only the iframe it seems to work fine. Looks like a combination of certain things.
I was able to solve this using this trick:
body, html {
height:100%;
overflow:auto;
-webkit-overflow-scrolling: touch;
}
Something to note - if you have absolutely positioned elements which are direct children of body (e.g. header), this will cause other issues on iOS - so you would need to wrap the site in a relatively positioned container.
adding this code
`body, html {
height:100%;
overflow:auto;
-webkit-overflow-scrolling: touch;
} `
caused dissapearing CSS animation in IOS on my site. May be due to "if you have absolutely positioned elements which are direct children of body"
didnt catch how to solve this issue so i just removed overflow and everything works fine now
nevertheless Thanks
I know iPhones used to not support position:fixed, but now it does and I'm seeing a weird glitch when I scroll a fixed position element behind other elements with higher z-index. The fixed positions element with the lower z-index appears in front momentarily, which looks really bad. Is there a way to prevent this?
I tried adding -webkit-transform: translate3d(0, 0, 0); to the fixed element and it doesn't seem to help this problem.
Here is a jsfiddle as well.
Update
I added transform:translateZ(x) in addition to the z-index and it did not fix the problem.
Update2
I added -webkit prefix and this DOES fix the z-index problem on an mobile Safari, but also causes the position:fixed to work incorrectly in desktop Chrome.
z-index is not reliable with position:fixed, as shown in this fiddle: http://jsfiddle.net/mZMkE/2/ use translateZ transformation instead.
transform:translateZ(1px);
on your page elements.
EDIT:
In your code,
Add this css:
.bla, .projects, .contact {
-webkit-transform:translateZ(1px);
-moz-transform:translateZ(1px);
-o-transform:translateZ(1px);
transform:translateZ(1px);
}
and then remove z-index refs from those elements and .intro.
Update 1: I added transform:translateZ(x) in addition to the z-index and it did not fix the problem.
Update 2: I added -webkit- prefix and this DOES fix the z-index problem on mobile Safari, but also causes the position:fixed to work incorrectly in desktop Chrome. "
Then try to wrap -webkit-transform:translateZ(x) in a mobile specific media query.
For example:
#media only screen and (min-device-width : ... ) and (max-device-width : ... ) {
.whatever {
-webkit-transform: translateZ(x)
}
}
So in this case it won't do anything on desktop Chrome
I tried the solution accepted as an answer in a specific case when I needed to set different position in the stack of different layers, but that alone didn't work both in desktop browsers (firefox and chrome) and Safari iOS
I came out with this hack which uses both translateZ and z-index for each div, which is working in those platforms. The order of translateZ and z-index is important. For setting each layers position is
-webkit-transform:translateZ(1px);
-moz-transform:translateZ(1px);
-o-transform:translateZ(1px);
transform:translateZ(1px);
position: relative;
z-index: 1;
I used the same value for the z-index and translateZ just for consistency, it is not necessary.
See working example http://jsbin.com/peyehufo/5
I'm not advocating for this solution, but it's the best I've got at the moment...
In order to replicate the effect of z-index with position fixed on an iPhone, it seems to require two techniques together:
As suggested by #tnt above, use transform:translateZ(n) where z-index is used to get mobile safari to handle the stack order correctly. This appears to have the unfortunate side-effect of causing the position:fixed to stop working...
Instead of position:fixed, use a javascript technique like this to fake it.
I haven't tested this thoroughly (because I'm not going to do it), but it seems to work fairly well. Although the "fixed" element seems to stutter a bit.
I am using my webpage to show a pdf from App_Data.
I using this html:
<iframe src="" id="iframePDF" style="width:100%; height:93%;z-index:1;></iframe>
And javascript
$('#iframePDF').attr("src", responseData.TempPath + "#zoom=100&page=1");
The zoom isn't zooming the page and I cannot scroll.
Is there any workaround for this or a solution?
You might be able to scroll using two fingers, which is not intuitive for the user. You can not make the area scrollable unless you know the size of the content, which you can't, because iOS doesn't tell you.
Sorry, friend, but then you'd have to look into a native or hybrid app like the solutions offered by Cordova (PhoneGap). It doesn't matter if the file is in .NET App_Data or anywhere else online.
The reason why it works in your browser is because it has a built-in file viewer which is loaded when you open the file in a new window.
Wrap the iframe in a width-constrained element of some kind then apply this CSS to that element:
-webkit-overflow-scrolling: touch