In IOS7 (Safari) we are seeing an issue where the iframe will not accept a lower width/height. For example, on an orientation change event the new width maybe say 600 vs 320. While it will resize to 600, going back to portrait mode, the width will remain at 600 instead of resetting back to 320. We have confirmed the values are being set correctly within the attributes of the iframe, but the css values are remaining at the previous larger values. We've tried clearing the style attribute altogether, resetting the dimensions to 0 directly before setting the new values, etc. Nothing seems to take affect. I'm leaning toward believing this is a safari bug. Has anyone else experienced this? All of the other posts that are similar all seem to be reporting scrolling issues and not resizing issues.
IOS will show all visible content, so you can't hide the overflow of an iframe. Is your content wider than the iframe? I have a feeling it might be
Related
I am using one css design and it works perfectly in full size browser but whenever screen size is reduced below 1280 px in width scroll bar goes missing and responsiveness in design gets frozen to that frame so user can not view complete site, can not scroll when on mobile devices or after reducing browser screen size. Request to please help with that. Below is the link to site where this problem is occurring
http://goo.gl/VzVmTW
You are setting your body overflow to hidden, once it gets to a specific width, so once you need the scroll, as soon as the browser renders your CSS, it will assume the overflow:hidden attribute thus removing your scrolling capabilities.
This happens on line 315 of your irms_default.css:
#media screen and (min-width:0px) and (max-width:1180px){
body{overflow:hidden;text-align:center;}
If you really need to apply a hidden overflow, try applying it only to the elements that need it to prevent such issues. A 'body' with a hidden overflow should exist only on static single page designs, to ensure the best of the user's experience.
I've looked and there doesn't appear to be another post the is exactly what I am looking for, and I am on a deadline to make this work so lets see if I can explain it better.
We have one page in development on a Drupal site that uses Panels and Views Slideshow. There are a lot of absolute and fixed position elements because of where they need to be on the page. The parent div needs to have a width and height of 100% to fill the page. Keeping in mind that the point of this page is to not have scrollbars and present everything to the user no matter what screen size they are on. So I have media queries cleaning up elements where need be on certain screen sizes.
Though when a user uses their browser to zoom into the page, the elements start shifting and stacking on top of each other. I believe this is because the 100% height/width is adhering specifically to the window size and doesn't expand beyond the window when a user zooms in.
I was able to fix it by removing the 100%'s and replacing them with pixels, but this becomes an issue because if the screen isn't the correct height or width, then you have scrollbars and the user doesn't immediately see everything on the page.
Is there any JavaScript or anything that can utilize the 100% height/width and allow them to expand beyond the page, and turn on scrollbars, during Browser Zoom?
Keep in mind that if a user is zooming in, its OK for the page to spill off and scrollbars to show, but the default screen this is not allowed.
I hope this is OK to show but an example of a page that uses Javascript to scale the entire page is pretty much what I can see myself needing but don't know how.
http://www.ammunitiongroup.com/
Any help appreciated and the quicker the better of course :)
This should help. Lets you detect the browser zoom level in mordern browsers.
https://github.com/yonran/detect-zoom
Example page:
http://htmldoodads.appspot.com/dimensions.html
I can't seem to find an answer to this rather interesting problem. In google chrome, images that have a set width and/or height, either using attributes, inline styling or css styling, refuse to show up on the page on initial load. They only seem to appear after there has been some page activity. Yet, if you let the images load to their natural size they display on page load perfectly fine. The images can be seen as it works in other browsers and when inspecting elements in chrome the image is display in the popup window.
Any know how to fix this?
define what you mean by: 'after some page activity'.
You also mentioned that the it happens when you have set width AND/OR height which leads me to believe in some of your testing your ommiting width OR height so it can be calculated by the browser. if that is the case then yes the image will never look proper and the elements will have no size on initial page load UNTIL the image is downloaded, the browser inspects the image and determines the dimensions missing to create the bounding box.
Edit:
After looking at your online site, my previous comment explains the gist of it but I can see that you're setting a width of 'auto' which requires the browser to load the image first and detect the sizes. Which will cause a delayed 'reflow' in the browser rendering. Set your widths and heights otherwise they will need to calculated by the client browser. And if you have not so good pc it looks sluggish. On my system if i hard refresh with no cache sometimes i get all the thumbs and other times I don't and the delay is very noticeable.
So in short make your images always have a width AND height.
Edit:
You also have some 404 errors that can cause some latency. http://www.webpagetest.org/result/120725_0C_3N6/1/details/
Edit:
I think your only option is to load the bg image first by getting it higher up in the order of resources downloaded so it loads in as fast as possible to be rendered.
One trick might be to load the bg image in a hidden div to preload it right away so the browser downloads it first. And even if you do that you should expect to see some flash of black background while you wait for the high res shot to download and get loaded. Can't set widths and heights on background images anyways. Going further you can speed up the response time maybe by loading all the thumbnails with an AJAX call AFTER page loads so they don't even compete with the big photo shot and start downloading until the dom is fully loaded. You can even put a nice effect in there to maybe fade in the thumbnails loading or something to that effect.
What is the best way to dynamically change the width and height of an HTML5 video within a webpage? The kind of behaviour I'm referring to is the same thing in the intro video of http://flipboard.com/
When the window is resized, the video still takes up 100% of the viewable size (without scrolling). I noticed that the video gets resized to a certain degree, but stops resizing and gets cropped at some point.
What is the best way to get the same behaviour? I want to have a video take up the entire viewable area of the browser without scroll bars. This is only on a desktop/laptop, I am not considering any mobile devices ATM.
What I have in mind right now is to dynamically change the width/height properties of the video to fit the viewable area using javascript, but also set a minimum size such that the video doesn't get distorted. The video can be placed in a container that is always centered, so if the browser gets to a size that is too small, it effectively gets cropped. I'm not sure if this is too long-winded and if there is an easier way.
Thank you.
It looks like they have the css properties of height and width set to 100%. If you use an element inspector like the one built into chrome or firebug for Firefox, you should be able to see exactly how they structured the html/css for the video element as well as the div its nested in. Then, as you said, also set a min-width/min-height property.
Unless I'm misreading your question, it should be that simple. Hope this helps!
you could do it with "Responsive CSS", there are some ways to do that,
you could set the viewport, max-width, min-width, etc.
This link have a nice explanation how to do that : http://kyleschaeffer.com/best-practices/responsive-layouts-using-css-media-queries/
Dear FB Developer Team,
we have an issue with the FB.Canvas.setAutoResize() function of the app iframe.
The frame extends vertically to the height of the first request, but on subsequent requests to pages with a lower height, the iframe doesn't resize vertically.
While we tried the FB.Canvas.setAutoResize() function, it seems not to work.
Could we somehow solve this issue?
Would be great to receive an answer here.
Best,
Max
This is a known Facebook issue, they're renaming setAutoResize to setAutoGrow for exactly this reason.
When your page shrinks in size you should use FB.Canvas.setSize to lower the height https://developers.facebook.com/docs/reference/javascript/FB.Canvas.setSize/
There have been several bugs reported about how
FB.Canvas.setAutoResize doesn’t set the height of the iframe correctly
in some scenarios. We have been trying to fix this and and have pushed
various fixes to ensure that it works correctly for the case when the
iframe grows in height. We however came to the conclusion that it is
hard for us to do this accurately when the iframe shrinks in height.
As a result we are renaming this function to FB.Canvas.setAutoGrow so
that it accurately reflects its functionality. If your iframe is
shrinking for whatever reason we recommend that you use
FB.Canvas.setSize with a height parameter to set the iframe height
explicitly.
As part of this change, you should be able to use
FB.Canvas.setAutoGrow today. FB.Canvas.setAutoResize will work for the
next 90 days and we will remove support for this method on January
1st, 2012. Here is some sample code to test the grow functionality.
https://developers.facebook.com/blog/post/565/