In Safari, when using the dynamic vw CSS unit for width and height, the parent element (without specified dimensions) will not adjust itself to the child element's width dimensions. Below is a fiddle and some screen shots:
http://jsfiddle.net/gby3N/
Any ideas or workarounds to this issue?
I got the same behaviour in Safari 7.0.4 and the only explanation I can come up with is that it's a Safari bug. Which is strange because I could only find people talking about iOS Safari having issues - nothing about desktop Safari.
Luckily the "buggyfill" that fixes iOS Safari's handling of viewport units, at https://github.com/rodneyrehm/viewport-units-buggyfill, seems to work here as well. I just had to add
<script src="https://rawgit.com/rodneyrehm/viewport-units-buggyfill/master/viewport-units-buggyfill.js"></script>
<script>window.viewportUnitsBuggyfill.init(true);</script>
to get parent to stretch to fit child in Safari. Note that I used init(true) instead of just init(), which checks for an iOS user agent.
Demo: http://jsfiddle.net/gby3N/2/
You also might have the option of simply adding min-width: 12vw; to the parent element. (12vw is the width of the child element.)
Related
I noticed today a strange behavior of Firefox, which I can not explain. An element (img) which is inside a div box and has a height : 50% will not be half the size of the parent.
Instead it has a size of only 2 - 3 px (the parent is at least 80px high at my resolution). In Chrome everything is displayed as expected.
HTML Code:
CSS:
Have also searched for this behavior on google. The only thing I found was a firefox setting (about:config browser.enable_automatic_image_resizing) for automatic scaling of graphics. But this did not fix the problem.
Thanks for your help!
I'm using css flexbox to do a header/body/footer layout. However if spicing up the outer-div with overflow-x:hidden, Chrome begins to crop the bottom (the status element) when reducing height of the viewport, and introduces a vertical scrollbar.
Firefox works as expected by shrinking the body-element height, and continue to show the statusbar when reducing the browser height.
Chrome restores the correct layout if reloading page, or changing the viewport width.
Stackblitz sample:
https://stackblitz.com/edit/angular-xtapbp
The difference between Chrome and Firefox can be seen by showing the above stackblitz in the two browsers.
The implied value of min-height (or min-width for default flex-direction: row orientation) is auto for flex layouts. For some reason, Chrome decides, that the size of the content that you have during initial page render should be treated as current auto value, and during window shrinking it does not recalculate the whole layout. Probably it is a bug in Chrome css layout engine. A solution for this is to add min-height: 0 to the content+status div, as shown in this link.
I currently have a website where I'd like the main body portion of the page and footer (below the header image and navigation bar) to always take up the available view space, but to expand below this if there's more content. I've been setting min-height of my container of class mainbody to a calc() function. The HTML and CSS have been tested and behave correctly in Safari and Chromium, however it fails to behave as intended on Firefox. The problem is most apparent on the Alumni page, which has no content at the moment, and also occurs on the Media page on a large enough screen . Is there anything I'm doing wrong?
100% height means 100% of the height of the content. To be honest, I don't know why it works in chromium and not in firefox.
What you need is 100% of the viewport. There are cool vw and vh units for that. (See availability.).
If you change min-height to min-height: calc(100vh - 268px) !important;, it will work.
If you want old style solution, you can google 100% height css, e.g. enter link description here
P.S.: Also fix your CSS.
I have a significant difference in a logo image i have when it is displayed in Chrome compared to Firefox (I did my testserver on Firefox and then live in Chrome)
Here are the 2 differences:
Firefox
Chrome
It should be appearing as it does in Firefox. I switched the logo and added in image characteristics to make it fit rather than editing the CSS file.
Here is the code:
<a class="navbar-brand" href="index.html"><img src="img/logo09.png" width="250%" height="250%" alt="logo"></a>
Is there a quick fix to this? Thanks in advance for any help :)
Use stylesheet, inline styles or Dimension attributes are a nightmare to maintain...
height: 123px; /*or any other fixed/dynamic value, unit*/
width: auto; /*let the browser do the scaling */
would help (unless you're running into specificity issues)
Also it's goot to know that in HTML5 % are not allowed on attributes width="" and height=""
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
<img> attributes
width
The intrinsic width of the image in HTML5 CSS pixels, or HTML 4 in pixels or as a percentage.
height
The intrinsic height of the image in HTML5 CSS pixels, or HTML 4 in pixels or as a percentage.
The issue you may be having can be related to your use of percentage. You set them to 250% but percent of what? It should be the parent element but what is the parent element set to? The parent of the image is the anchor element which has no width set and is not a block level element.
Try setting the parent element to some fixed width and see if the issue goes away or both browsers display the same.
For example, I set the enclosing anchor element to display:block; and set its width to 500px.
Replace the percentage width with a fixed pixel width. Firefox and Chrome register % measurements differently, due to the fact that the containers are laid out slightly differently. Also, add the measurements to a class and give then an !Important attribute. I believe Chrome has a css file it uses on all the sites visited in it, which gives some design layouts etc.
UPDATE:
After your comment, try looking in developer tools at the element to see if something is overwriting it. If there isn't, then I'm not sure what to suggest. Maybe go with a different design, such as a centered div with the elements inside, or use a navbar with this logo in, or a centralised logo without the bar. There are lots of options. Sorry I couldn't be more help
If you view the following website in IE9 (or any other modern browser) you will see the effect I am going for.
However viewed in IE8 or lower the header DIV that contains the mans photo collapses to what appears to be 0 height.
I have tried min-height and also the clearfix, but nada.
http://www.adrianwaddingham.com/
Have you tried just setting the height and making it !important, such as:
min-height: (yourheight)px!important;