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
Related
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.
I am currently working on a reponsive css webdesign and have a few sprites for different button states.
In this case I've tested the webdesign in Firefox, Opera, IE (compatibilty starting from IE8), Chrome and Safari and everything is displayed correctly. The website has been tested under different cell phones and tablets with different browsers without any problems.
I'm in the final testing stages and having co-workers see how the website looks in different resolutions... A friend who owns a macbook pro is the only one who encounters this problem and only under safari which makes it difficult for me to target and solve. I have tried to reproduce the problem using his screen size and switching safari's mode to that of a mac user without success.
The code is the following :
.buttons-menu .btn .rules, .buttons-menu .btn .contact , .buttons-menu .btn .tickets , .buttons-menu .btn .profile { display: block; width: 143px;height: 32.5px;padding-top: 37.5px; background-size: 100% 300%;}
.buttons-menu .btn .rules {background: url(../images/sprite-button-03.png); background-position: 0 -100%;}
The problem is that this tester sees about 2 pixels of the second part of the sprite when he shouldn't and this only in safari.
Thank you for reading this.
EDIT : SOLUTION : As ralph.m thought, the problem came from the rounding of the decimals in safari that didn't always behave the same as in other browsers.
Avoid using values like .5px. The browser will have to round that up or down to a whole number, and you don't know which way it will go.
This works well for browsers that support background-size. Otherwise the 2x image is zoomed.
.a {
background-image: url(img2x.jpg); /* 1000x1000 */
background-size: 100%;
height: 500px;
width: 500px;
}
This should be used for browsers without background-size support.
.a {
background-image: url(img1x.jpg); /* 500x500 */
height: 500px;
width: 500px;
}
Is it possible to trick the browser to fallback when background-size is not supported? I know I can use #supports but it's much less supported than background-size so quite pointless in this case. I don't want to use JavaScript either.
Basically like so, except work!
.a {
background-image: url(img1x.jpg); /* 500x500 */
height: 500px;
width: 500px;
/* stop parsing this rule when background-size is not supported */
/* otherwise continue parsing and set different background-image */
background-size: 100%;
background-image: url(img2x.jpg); /* 1000x1000 */
}
This doesn't work obviously, but is there a trick which could make it work? Thanks.
A CSS-only fallback for background-size is tricky, but yes it can be done.
The trick is to use the short-form background style to set the various background properties, rather than using the individual styles like background-size, background-image, etc.
So in your case, you would have something like this:
background: url(img2x.jpg) 0% 0%/100%;
(The 0% 0% is for background-position (0% 0% is default) which is required before the background-size value when using the short-form style).
So far, all I've done is condense your existing code into a single short-form CSS line, but the clever bit is that now we've done this, a browser that doesn't recognise background-size will throw away the whole line, rather than just throwing away the background-size on its own.
This means that we can specify an entirely different set of background values for older browsers.
background: url(ie8bg.jpg); /* Shown by IE8 and other old browsers */
background: url(img2x.jpg) 0% 0%/100%; /* shown by new browsers with background-size support*/
You can see a demonstration of this in action here. Modern browsers will get the one background image, stretched by a 100% background-size setting, and older browsers (like IE8) will get the an entirely different image, without any stretching.
Since you get to define an entirely separate background for old browsers, you can even do things like have a solid background colour for IE8 rather than an image while still providing an image for other browsers.
So yes, a fully CSS solution that gives you a fallback for browsers that don't support background-size.
Hope that helps.
[EDIT]
Browser compatibility may be a minor issue here. Some browsers may support background-size but not support it as part of the background short syntax. For the most part this applies only to older browsers (eg Firefox 7), but it is still a problem in current versions of Safari. What this means is that with this technique, Safari will see the fall-back background, even though it does actually support background-size.
This obviously isn't ideal, but it is mitigated by the fact that it will at least get the fallback image, which means the page ought to at least look okay, if not quite as good as in other browsers. Hopefully this issue in Safari will be fixed in a future version.
In the meanwhile, this point doesn't detract from the fact that this answer is a valid solution to the question - it does indeed provide a fallback option in pure CSS.
In light of this question I've written a blog post on the subject, which hopefully covers it in more detail and provides other options if this CSS fall-back solution isn't sufficient.
You already mentioned #supports. You could define imgx1.jpg as default and if background-size is supported, you set it to img2x.jpg
For browsers like Chrome you could parse your CSS file with PHP and decide according to the User-Agent if the browser supports this or not.
You get the User-Agent in PHP with $_SERVER['HTTP_USER_AGENT']
I might not completely understand what exactly the problem is with the lack of support of the 'background-size' property, but here is my thinking:
If you want to use a double sized background image, probably that is for high density (retina) displays. If so, I'd try to define my basic style with the single background image and the 'background-size', which will be ignored by older IE versions. However, browsers handling the pixel-density media query will try to render the double density background image.
.a {
background-image: url(img1x.jpg); /* 500x500 */
background-size: 500px 500px;
height: 500px;
width: 500px;
}
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
.a {
background-image: url(img2x.jpg); /* 1000x1000 */
}
}
I hope it makes sense and that's what you've been looking for.
Here are some more nice ideas about CSS/JS retina background sizing: http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/
Am Trying to use my banner section with cover background it works fine with latest browser's.But struck on ie7 & 8
css is like
.banner {
background: url("images/banner_bg.png") no-repeat center center fixed;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/banner_bg.png'
,sizing Method='scale');
-ms-background-position-x:100% center;
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='images/banner_bg.png', sizingMethod='scale')";
height: 297px;
background-size: cover;
}
Any ideas.
I've used http://louisremi.github.io/jquery.backgroundSize.js/demo/ in the past to give background cover/contain support to older versions of IE.
background-size: cover is not supported in IE8 -- not even with an -ms- prefix. It simply hadn't been invented yet when IE8 was released.
If you need to use this feature, my suggestion is to use CSS3Pie. This is a polyfill script that adds support for this feature (and other CSS features) to old IE versions.
You may also want to see my answer to a similar question here: I want the background picture not to be displayed in the IE. How do I do that?
I know this is late, but this answer may help someone else:
Download backgroundsize.min.htc and put it inside your project.
Now simply add these lines in your css:
.class_name{
//your other properties
background-size: cover;
-ms-behavior: url(backgroundsize.min.htc);
}
NOTE: use the url according to your project setup.
Enjoy this simple solution. :)
I've seen other solutions on this topic, but none of them did the result I need (or want).
The problem is, Mac renders some fonts in an awkward way, the fonts are way too thick, even on Regular style. It's annoying!
So I thought I'd go for a CSS-Workaround to let the fonts seem thinner. All I could think of would be an inner-shadow for texts in hope they won't get too blurred, but this is easier said than done, text-shadow doesn't support this (for whatever reason).
Does anyone have an idea on how to achieve this effect?
I think this would be a losing battle, if you take into consideration that now, rather than the possibility of only dealing with fonts at a fixed resolution (72dpi, the standard on monitors for a decade or so, now), you also have to deal with some Mac's "retina displays" where the resolution is approximately 220-227ppi.
I'm also certain I read somewhere that those programs that have not been rewritten to scale properly on retina displays have to be interpolated by the OS, so it's quite possible that, from Mac to Mac, browser to browser, the same font is going to look quite different. As of right now, the only browsers I can confirm having Retina support are Safari (big surprise there, right?) and Chrome.
(For more information on this subject, see this question: https://apple.stackexchange.com/questions/54905/retina-macbook-pro-fonts-look-terrible)
You might be able to vary the fonts used based on pixel-ratio with a media query, if you are really committed to trying to hit this moving target.
#media all and (-webkit-min-device-pixel-ratio: 2) {
/* all your retina-display-tweaked settings, here */
}
Maybe this is a little bit too much effect but i think this is what your are looking for.
Adding a text inner shadow effect with :before & :after
.depth:before, .depth:after {
content: attr(title);
padding: 50px;
color: rgba(255,255,255,.1);
position: absolute;
}
.depth:before { top: 3px; left: 3px }
.depth:after { top: 4px; left: 4px }
jsFiddle: http://jsfiddle.net/4GAkK/