I'm developing a website and i'm having trouble with Safari.
I'm using a background-image: -webkit-linear-gradient that is working perfect on Chrome, Firefox, etc... but when it comes to Safari, the output is different.
It is showing only on half of the screen.
I'm using this style on the body:
body {
background-image: -webkit-linear-gradient(-40deg, #000,#333 50%, #f9f9f9 50%);
background-size: auto 1200px;
-webkit-background-size: auto 1200px;
background-repeat: no-repeat;
background-attachment: scroll;
top: 0;
left: 0;
}
I've tried searching for a solution, but so far nothing seems to work. I've tested changing the background size to cover but it doesn't give the output i intend, as well as setting top: 0; and left: 0; as shown in other question around stackoverflow, but that didn't work too.
The link to the specific page i'm talking about is this one: https://dashiofficial.com/product/test-product-01
Does anyone know the solution for this problem?
Thanks in advance.
I have checked your website and was able to fix your safari problem.
It has nothing to do with the gradient you defined for body{} but with the background-size for .single-product{}
Try to change
.single-product {
background-size: auto 1060px;
}
to
.single-product {
background-size: 100% 1060px;
}
It works for me in Chrome and Safari (not tested in Edge or Firefox).
Related
I'm trying to use the gradient property to create a background and for some reason, it renders gradients wrong in firefox but perfectly in chrome based browsers. I've tried using -moz- and it doesn't help. For some reason, it creates a bunch of distinct lines and it looks really bad when I try to make it bigger.
body {
height: 100vh;
width: 100vh;
background-image: radial-gradient(hwb(0 35% 65%) -100%, hwb(0 13% 87%));
background-size: 200% 200%;
background-position: bottom;
}
Check out these pictures for reference
Firefox
Chrome
So I used Chrome Dev tools to check the responsiveness on an iphone and it looks fine. But when I check out the site on my actual iphone the background is completely different. Here is the link to my code https://github.com/CurtisKil/manesseGrading_2
How it looks on Devtools
How it actually looks on iphone
The problem here is:
background-attachment: fixed; does not work well with most browsers and especially does not work properly on iOS. (Read more here on why: How to replicate background-attachment fixed on iOS)
Quick Fix:
Don't use Background attachment fix for iOS.
So change your code in style.css from:
#home-section { background: url(../img/header-bg.jpg); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; min-height: 800px; }
To:
#home-section { background: url(../img/header-bg.jpg); background-repeat: no-repeat; background-size: cover; min-height: 800px; }
Alternate Solution:
Find workarounds for making background-attachment:fixed work for different browsers. Here is something to get you started:
Fixed background image with ios7
Fixed body background scrolls with the page on iOS7
I'm trying to make the image on my site to display 100% height but crop width as needed. On PC the site works as intented as can be seen below:
However when I check the site with my phone it displays the whole image distorting it.
HTML:
<header class="wide">
</header>
CSS:
body, html {
height: 100%;
}
.wide {
width: 100%;
height: 100%;
background-image: url('sebastian-unrau-42537-unsplash.jpg');
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
#media (max-width: 1199.98px) {
.wide {
background-attachment: scroll;
background-position: initial;
}
}
The media query is mandatory as the image doesn't work at all if the background-image is fixed and centered.
Now if I remove "background-size: cover":
It's kind of closer what I'm after but not quite. Am i missing something?
My PC is running Chrome 66.0.3359.117 and my phone 65.0.3325.109
Ok I figured it out by accident. I was using an image from Unsplash.com and the the original resolution is 6000x4000. As I was making a Codepen project to post here I resized the image and wondered why it worked on codepen but not on my pc. Well it seems the resolution needs to be about 5500x3667 or smaller to work.
Maybe there is a limitation I did not know of but anyway got it working now. I didn't change anything else.
You could use this property :
background-size: x% y%;
The first value is the horizontal position and the second value is the vertical.
So you can try :
background-size: auto 100%;
The following code renders well in IE9, FireFox, Chrome, but not in Safari:
.search-choice
{
position: relative;
background-clip : padding-box;
background-image: url('../Design/icon_chosen_close.gif');
background-repeat: no-repeat;
background-position: top 6px right 6px;
}
<ul class="chzn-choices">
<li class="search-choice" id="selLVB_chzn_c_0">
<span>multi1</span>
</li>
</ul>
Safari doesn't seem to take into account the background-position. I have tried a number of variants (like background-position-x: right 6px), but nothing seems to work. I just can't offset the background image in Safari starting from the top right corner.
Any ideas? Thanks a lot for your time!
Found out that Safari marks the following line as invalid and the background image won't be displayed:
background-position: top 15px right 0px;
But when I type only:
background-position: top right;
Safari generates the following by itself:
background-position-x: 100%;
background-position-y: 0%;
Found then out that Firefox completely ignores:
background-position-x: 100%;
background-position-y: 0%;
So finally I did it with:
background: url(../images/image.png) no-repeat;
background-position: top 15px right 0px;
background-position-x: 120%;
background-position-y: 0%;
Whilst Safari ignores the second line, Firefox ignores the last two lines.
This tweak seems to work in older Internet Explorers, too. Tested in IE8.
There is a bug open in Safari's implementation around the long-hand syntax of background-position: https://bugs.webkit.org/show_bug.cgi?id=37514
My fix for this was to use background-position: top right; in combination with right padding and background-origin: content-box;
It may also be useful in some scenarios to use a pseudo element instead of a background image, and just position that as you would the background.
If you can set right position from right and top only, you can still do it old school.
background:url("../images/") no-repeat Xpx Ypx;
Where X marks width from left, and Y height from top.
I had a similar issue when giving an <a>-tag a background-image. To give it display: inline-block; solved the problem for me.
Best way is to use:
background-size: auto;
the weirdest thing just happened, I had a problem I fixed with the footer and I accidently left the %sign after contain in my code. Take a look. My site is usahvacsupply.com
html, body{
overflow:auto;
margin: auto;
background-image:url('/images/Testing1/bg2.jpg');
background-repeat: no-repeat;
background-position:top center;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
background-size:contain%;
top: 0;
left: 0;
}
Without the % sign after contain it throws everything off. The % only satisfies for firefox though. Does anyone know a fix for all browsers? IE the % helps but throws off the top level navigation tabs. In chrome it is all out of wack. I'm pretty much baffled here so help would be appreciated.
Well, you have different background-position rules for the different prefixes.
If you'd like to use 'contain' as a value, try removing the % and then follow suit with the other rules.
-moz-background-size: contain;
-webkit-background-size: contain;
background-size: contain;