I'm encountering a very niche issue CSS issue on Safari.
I have the following CSS rule:
min-height: calc(100vh - 115.5px - 25px*2);
This works on Chrome, but Safari doesn't seem to like the combination of calc and vh. (It works if I replace vh with %, for example--but I do need to calculate based on vh or some appropriate alternative.)
Is there some way around this to make this work? Alternatively, is there another way to refer to vh that is calc-friendly on Safari?
before you use vw or vh, you should define:
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
}
and make sure you use spaces between + and - as you did.
Safari seems to be kind of buggy with viewport units in general, especially if you go back a version or two. The last time I tried to use vh/vw, I ran into similar issues and ended up making use of the v-unit javascript micro-lib, and it worked out very well.
CSS is rapidly catching up to javascript for things like layout calculations, but when it gets complex, supplementing your css with some light scripting often works better than CSS alone.
This is a known bug - also reported on caniuse (under Known Issues).
See this SO answer for a workaround.
Related
Is there any disadvantage in this example?
.class {
max-height: 500px;
max-height: 50vh;
}
I want to do this because if vh is not supported in some browser, that browser will apply max-height: 500px; and ignore the line of vh.
This is absolutely fine. They are cascading, so the last (supported) style with the same level of importance always wins. It is a common case to override some CSS Rules with another class, so the browser has multiple instances of the same property to choose. So why shouldn't this be allowed in the same class? I can see no disadvantages, except for the extra line of code, but if you have to support old browsers, you need a fallback.
I'm assuming you know that 500px will not always be the same width/height as 50vw/vh, so yeah, a disadvantage would be, that it may looks different in older browsers. But from a syntactic view, there is nothing wrong.
I think there is a link which can help you.
How to write css fallbacks for vh vw
If browsers encounter a property or a value that they don't understand, they ignore it and move on.
It's okay to provide a fallback for browsers that doesn't support vh or vw.
h1 {
font-size: 36px; /* Some tweener fallback that doesn't look awful */
font-size: 5.4vw;
}
There is nothing wrong in it, if Modernizr have this check already use it to check for unsupported browsers.
The metrics which you are using depends upon your window and object size. Consider both while using px and vh at the same time.
No,
The vh will have priority (cause it's the last max-height in your css file) but only if it's supported in the current browser.
But vh is supported in a lot of browser (93.19%) :
https://caniuse.com/#search=vh
So for me it's okay and I never hear about a bad use of multiple same properties in one class
Yes. There is a disadvantage. 50vh depend on viewport of the device and its equal to the 50% of viewport where as the 500px is the pixel value of device both are not equal at the same time.
secondly, if the browser support both the last one is executed i.e. 50vh.
I hope you get my point. For any query please comment. All the best.
Is there a CSS/Modernizr way, to know if the browser support background-attachment:fixed ?
I'm using background-size & background-attachment together
background-size:cover;
background-attachment:fixed;
And if it doesn't support, it still have an impact on the background-size, and I wants to prevent it.
I prefer a Modernizr way(like a new test).
You can see to issue here the 2 big "parallax" images(scroll down) - with the css class of:
"parallax image-1", "parallax image-2".
http://royalchef-yes.walla.co.il/
I have been banging my head against this issue recently also. I have parallax strips in a design and iOS users were reporting that the background images in these a) were horribly distorted, and b) were not parallax. I don't own an iOS device, so I had to work through others to debug this, but it appears that iOS purposefully disables on-scroll updates like parallax effects, and this happens in Chrome as well as Safari.
I was unable to find a way to get parallax backgrounds to work on iOS (although I notice that there are some SquareSpace and other sites that have achieved the effect by swapping them for scaled inline images, which was more complex and time-consuming than I was willing to attempt for something that should just work). So instead I decided to simply disable the parallax effect for iOS by resetting the background-attachment value to scroll for these elements on iOS only. Since Modernizr detects features and not browsers, I had to use this script to detect all iOS devices and then set a CSS style to override the fixed value:
https://gist.github.com/jsoverson/4963116
Then my CSS is:
.device-ios .parallax-strip {
background-attachment:scroll !important;
}
It's not ideal (it's a device-dependent hack and it downgrades the experience), but given Apple's hostility to parallax on iOS (supposedly because it affects performance), I think I can live with it.
Hope that helps someone else.
iOS 13 does not support background-attachment: fixed property, you need a fallback function to overcome this. The fallback function needs to check whether the device is iPhone or iPad.
var usrAgent = window.navigator.userAgent;
if (usrAgent.match(/iPad|iPhone/i)) {
// then do something
}
I found an answer in another question, so I'm not sure if it works but it doesn't hurt to try :)
#background_wrap {
z-index: -1;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: 100%;
background-image: url('xx.jpg');
background-attachment: fixed;}
And put into
<body><div id="background_wrap"></div></body>
Source: Using background-attachment:fixed in safari on the ipad
Basically, I want to reset (undo) a Twitter Bootstrap 2.2 reset for img that originates from the reset.less file.
Twitter Bootstrap is essentially setting this css:
img {
width: auto\9;
height: auto;
}
What CSS can I add after this to undo this? I'm actually using the bootstrap-sass gem, so that's what I need to deal with.
If I comment out the CSS in the gem source, my issue is resolved, but that doesn't help me when the gem is loaded by heroku. So I need a local override/monkey patch to fix this.
Thanks. Here is the issue: https://github.com/desandro/isotope/issues/335#issuecomment-11507013 and here: https://github.com/twitter/bootstrap/issues/6541
The problem without this patch is that the awesome isotope library can't function properly as chrome and safari can't draw the images correctly.
You can add in a new duplicate selector underneath this one:
img {
width: auto;
height: auto;
}
That should override it.
Adding it into a new file that is called under the main one in the <head> section of your document would work too.
I posted the answer here: https://github.com/twitter/bootstrap/issues/6541
Inlining this in the CSS worked, like this:
<img src="blah-blah" width=398 height=265 style="width:398px; height:265px">
In fact, I also tested Isotope without using the width and height attributes, like this:
<img src="blah-blah" style="width:398px; height:265px">
And that worked fine! Any recommendation if it's better to only specify the CSS?
I was able to very easily test this without bootstrap (or bootstrap 2.0) by using this CSS:
img {
width: auto;
height: auto;
}
It seems that the width and height in the CSS do override the image properties, and before the images get loaded, the browser does not know how much space to allocate, and then, even after the images load, the spacing is still wrong, at least with Isotope. Inlining the style does workaround the issue. I think I tried using regular styles, but that didn't seem to work, but I may have had a CSS priority issue. Any way, since the image size is laid out with the image properties, it's rather natural to put in this tiny bit of inline CSS. I hope we eventually find a better solution, as this will surely affect others when upgrading.
Or at least this should be documented that one needs to use the inline style for the width and height of the image rather than the properties.
I have a JQ slideshow in a div on this page:
http://www.lucky-seed.com/web.html
and have a css sheet for IE with the following style:
.slideshow { height: 599px; width: 700px;
max-width: 700px
margin-top: 00px;
margin-left: 295px;
float:left;
position: relative;
display: inline;}
Where am I going wrong? It looks great in everything but IE, but once in IE, I can't seem to move the position around no matter what I do.
Thanks in advance for your insights.
Hello fellow Pittsburgher :P
You've got so many different, conflicting styles going on there. While it's not a specific answer, might I suggest using a CSS framework like Blueprint ( http://www.blueprintcss.org/ ) to better manage your columns with greater simplicity and let it worry about IE compatibility. Rolling columns yourself is usually unnecessary these days.
In ieweb.css, try changing the margin-top on .slidenav to 50px, instead of -20px.
That moves the arrows to approximately the same place that they are in Firefox.
It might be an idea to scrap the IE specific stylesheets and do them again if need be. If you remember your question from yesterday, you had a weird issue with comments. Those comments were causing parsing errors on your pages for IE, so I imagine a lot of the "fixes" in your IE stylesheets are no longer required now you've sorted those comments.
What is the definitive way to mimic the CSS property min-width in Internet Explorer 6? Is it better not to try?
foo { min-width: 100px } // for everyone
* html foo { width: 100px } // just for IE
(or serve a separate stylesheet to IE using conditional comments)
You could use an expression (as suggested by HBoss), but if you are worried about performance then the best way to do this is to add a shim inside the element you want to apply a min-width to.
<div id="container">
The "shim" div will hold the container div open to at least 500px!
You should be able to put it anywhere in the container div.
<div class="shim"> </div>
</div>
#container .shim {
width: 500px;
height: 0;
line-height: 0;
}
This requires a little non-semantic markup but is a truly cross-browser solution and doesn't require the overhead of using an expression.
This article on CSS Play, by Stu Nicholls, shows the different methods for achieving min-width in IE, in all modes (Quirks, etc) and even for IE/Mac.
I've fiddled with every answer given here in the past month. And after playing with Pretaul's method (Min-width in MSIE 6), it seems to be the best alternative to min-width. No hacks or anything, just straight up compliant CSS code which takes 30 seconds to implement.
From Googling around, expressions seem to be the most popular. For me anyways, ittended to randomly lock up my browser (both IE and FF).
I dunno, I had some success with:
min-width: 193px;
width:auto !important;
_width: 193px; /* IE6 hack */
A combination of dustin diaz' min-height fast hack & How do I specify in HTML or CSS the absolute minimum width of a table cell
do your css tag as _Width: 500px or whatever.
This works pretty well...
div.container {
min-width: 760px;
width:expression(document.body.clientWidth < 760? "760px": "auto" );
}
Min-height fast hack works for me (also works for width)
The shim example is fine for forcing the browser to show a horizontal scroll bar when the container gets to a certain size but you'll notice that the content in the container will still be resized as the window gets smaller. I imagine that this is not the overall goal when trying to achieve minimum width in IE 6.
Incomplete min-width technique http://www.mediafire.com/imgbnc.php/260264acec99b5aba3e77c1c4cdc54e94g.jpg
Furthermore, the use of expressions and other crazy CSS hacks just isn't good practice. They are unsafe and unclean. This article explains the caveats of CSS hacks and why they should be avoided altogether.
I personally consider scaryjeff's post to be the best advice for achieving true min-width in IE6 and as an experienced CSS layout developer I've yet to find a better solution that is as applicable to problems of this kind.
This article on CSS Play, by Stu Nicholls, shows the different methods for achieving min-width in IE, in all modes (Quirks, etc) and even for IE/Mac.
I've provided an answer to a similar question that details the use of this technique to correctly achieve min-width. It can be viewed here:
CSS: Two 50% fluid columns not respecting min width
The technique is simple, valid CSS that can be used in almost any situation. Applied to the shim example above it results in what I consider to be correct min-width functionality.
Correct min-width technique http://www.mediafire.com/imgbnc.php/a67b2820bfbd6a5b588bea23c4c0462f4g.jpg
Single line button
button{
background-color:#069;
float:left;
min-width:200px;
width:auto !important;
width:200px;
white-space: nowrap}
Use conditional comments to reference and MSIE 6 specific style sheet, then create CSS as below.
Compliant browsers will use:
min-width: 660px;
Then MSIE 6 will use:
width: expression((document.body.clientWidth < 659)? "660px" : "auto");