Update: It turns out Apple just silently prevents you from having a fixed-size iframe in iOS. Awesome. How to get an IFrame to be responsive in iOS Safari?
I am trying to do something I expected to be really simple: embed a fixed-size <iframe> inside an absolutely-positioned div.
This is running on WKWebView on an iPad.
No matter what I try (and I've tried everything I can think of), it will not respect the size I tell it to be, and instead always auto-sizes its height to match its contents.
I'm just trying to figure out how to stop this.
Here are the CSS attributes, taken right from Safari while connected to the iPad:
The <iframe> element itself also has its height and width attributes set to the same values:
But as you can see from the Computed view, it is completely ignoring all attempts to set its height and ends up rendering like this:
What in the world is going on? It is causing my web app to scroll way out of the bounds of what should be its fixed screen size. I've been fighting this thing for over an hour and have made zero progress.
You should be able to just set the overflow to hidden. This will clip to the set size. I wouldn't use the iframe though. They are considered obsolete in page layouts.
Related
I'm currently working on a html email for various clients, and having some strange issues using gmail (yay) - specifically, when viewing an email through the browser. (No issues in the app)
The issue only really comes about when using the browser on a small screen (eg mobile) - all the images are displaying too wide, despite a max-width, meaning the layout is stretched and requires horizontal scrolling. Whilst it causes no issues on desktop, the same thing happens to the code
On my images, I've set
style="max-width:100% !important;"
inline on each image. I also have a <style> block in the head with
img {max-width: 100% !important;}
When inspecting the image element (both on my phone and pc), I'm seeing no sign of the max-width from the head, which is not totally unexpected.
What's weird is that each image still has a max-width set inline- BUT it is no longer in %, but in px.
Inspected in the pc browser, the inline max-width now says
max-width: 1920px;
Viewed on my phone (android, inline max-width is
max-width: 767px;
In this case, the image is now WAY too wide and is breaking the layout. The same thing happens on all images, regardless of their actual size.
I'm not seeing any message telling me that the email has been adapted for my screen, or any option to turn this on or off.
Has anyone had this happen before? Any ideas on how to prevent gmail messing with the max-width, or getting it to respect the max-width in the head? (I've avoided using classes or id's to attach styles from the head as as far as I know, google strips these out)
Even weirder (or maybe I'm losing it...) I'm SURE this was working yesterday...
UPDATE: think I've solved why it was apparently working yesterday - it wasn't - changes I'd made in dev tools weren't clearing when I reloaded, so the max-width I'd added in as a test (replicating a max-width in the head) was still there...
After a bit more playing, adding width: 100% !important; inline on all wide images seems to work as a fix - gmail doesn't mess with the value. Would still be interesting to know why it changes the value of the max-width though, if anyone has any clues!
Gmail is notorious for misusing its maxwidths for set layouts.
try and avoid setting max-width to a percentage value for elements that aren't high level containers. you will run into weird rendering on things like gmail app as well. typically gmail app converts all widths into max-widths so it can crunch your content but still maintain the structure at higher screen resolutions.
gmail webapp does something similar. it restricts the widths you can set an element to so you can't add things that are wider than your display, at which the gmail web app is displaying at 100%.
gmail mobile app - forces your content into a 320px/480px wide box
gmail desktop app - forces your content to never exceed your screen res
Gmail desktop treats styles in the head quite strange anyway, it completely ignores most classes/id's (don't listen to people that say it strips them completely) if you use other tags as identifiers other than #id and .class it will apply those styles. e.g.
* [lang~="identifier"]
lang is pretty much the only tag that you can use that wont get in the way of tags that are being used, i.e. Alt, Title and Href.
Just be careful, if you are using media queries or anything that starts with "#" in the style tag gmail may potentially (depends on how its feeling that day) completely remove that style tag. You can avoid this by adding those styles in a style tag in the body though.
in conclusion. Don't rely on max-width to control your layout from inside out, set pixel values to limit width="100%".
Hope this helps
I'm having a little problem with the auto-resizing feature!
I've already proficiently triple-checked (with the search-tool) that all my width-settings are set to %. There's nothing with a fixed width in the whole website. (Well, in fact yes, but nothing bigger than 100px, and in such case, not more than one per row).
But still, if I reisize the browser's windows by less than 420px width, the width of my body (html-body, of course :P) will stop by 420px and the well-known h-scrollbar appears.
Any ideas? Is there some sort of default-minimun-width? I've tried by setting a smaller body's min-width but with no results.
Just in case that's somehow helpful: the website is composed of an index (in html), two sets of three jQuery-script and one CSS files, which are alternatively wrote to the project when the site loads (one for desktop-browsers, one for mobile). I've already tried building the sites separatedly, with no better results.
I think I resloved problem with Firefox. I think FF allows to shrink website to minimal width which need toolbar with website address, searcher, bookmarks and so on. I was testing on CSS tricks which is great site if comes to mobiles :)
At the first screen at 280px width toolbar stops shrinking as the website. Sometimes I have there also Firebug icon or Fireftp icon which makes my sites stop shrinking earlier.
But right click on toolbar and unchecked Toolbar menu. Menu should hide and site still shrinking on resize. Here is Firefox and Chrome and as you can see they are quite similar as comes to minimal width.
If anyone will notice that this soultion is wrong and didn't work, please give me a feedback :)
I have created a page that has similar functionality to that of the DiggBar (i.e. a header of specified height and an iframe below filling the rest of the page).
I had this working a while back with desired results, but all of a sudden the height of the iframe has gone from 100% of the remaining page height to only 44.8px. The catch is that this is only occurring in one browser — Firefox on Ubuntu.
I thought that this should be happening in all other browsers, but it's not. It displays correctly in IE, FF, & Chrome on Windows and Chrome on Ubuntu.
Finally, using Firebug, I have selected inspect element to try to determine what's going on, but it only tells me that my height is defined to be 100%, but that it is computed to be only 44.8px.
I am looking for some guidance as to how best to debug this issue because I have completely run out of ideas. I didn't think that it would be necessary to post all of the code that produces this problem, but if any is absolutely needed, just ask.
Thanks.
Unfortunately the Cascading part of the Cascading Style Sheets threw me off. I had another (let's call it 'hidden') reference to the parent of the iframe which caused the weird height calculation issue.
Funny that this only happened in my Ubuntu version of Firefox, though.
If you have a complicated layout structure, setting height of all divs to 100% may break the page layout. In this case I recommend using javascript to set the height of iframe to 100%. In my case I used JQuery, but I believe pure javascript DOM functions should also work. I set the height of iframe equal to parent div height:
$('#doc-preview iframe').height($('#doc-preview').height());
Here the doc-preview is an id of iframe's parent div.
Make sure to run this script after the page has been loaded.
Where can I find documentation about the new behavior of the IFRAME element in iOS 5 Safari? Empirical evidence suggests that IFRAMEs now will expand to fit the content, expanding the containing document to do so, thereby often breaking code that works fine in iOS4.3 (and desktop browsers).
Is there any way to control this new behavior?
I couldn't find any official documentation that lists the differences of the <iframe> tag in iOS5, but I found these links which do explain a little bit about the new <iframe> tag/changes in iOS5 safari.
New Mobile Safari stuff in iOS5
iOS SDK Release Notes for iOS 5.0
Handling Events, Safari Web Content Guide
You mentioned that the <iframe> tag now stretches to the width of the content inside it. Would you want it to be a set width?
You could either...
Try styling the iframe in css to the width you want it (I'm sure you've tried this)
Set a width to the body tag so that the iframe doesn't stretch outside of it (not sure if this works)
Put a <div> around the content being retrieved by the iframe that has a set width
Edit: I just read the comment saying to style the iframe directly, but you mentioned it doesn't work. I'd try styling the container div instead, if that's an option.
i am currently building a website using HTML and and external CSS Stylesheet. I have a "container" which holds the content of my page, central to the body. What i want is that when a user adjusts the text size using there browser that the "container" automatically resizes with the text so that it stays in proportion. At the moment the text size changes but the container doesn't. I hope someone can help me with this problem.
Thanks in advance
Matt
This is a bug in IE, in other browsers e.g. Firefox, the containers will be correctly resized.
You would need to detect the browser type; then if it's IE use some fancy javascript workarounds to get it to work.
Catch browser's "zoom" event in JavaScript