we want to make everything on our website sized to 90% of actual proportions (luck we are using rem units), so the easiest solution for us is to write html { font-size: 0.9rem; } rule. However, we are facing some bugs with scaling in chrome - some elements have greater margin the other, not precise width/height etc. It works great in Safari and Firefox... you can see the example here in fiddle, some buttons have undesirable last 1px height white line instead of background.
edit: well it seems to occur on retina display only
edit 2: I've updated chrome from 72 to 73 and it's okay now
The problem comes with your background. Change it to '#ff0000', and the gap goes away.
If you change your gradient to 'background-image', and then add 'background-color'; your problem appears to be fixed:
.button.primary {
background-image: linear-gradient(to right, #fac364 0%, #fabe53 50%, #ffb433 100%);
background-color: #fac364;
border: 0;
}
Updated your fiddle: https://jsfiddle.net/kcazfps8/
Related
Got clip-path set on div with background image. When in Chrome horizontal white lines appear through the div / background image. Anyone know how to remove this?
See screenshot:
Screenshot with horizontal white line bug
Here is also a link to the course page
https://www.sunderland.ac.uk/study/health-paramedic-clinical-sciences/undergraduate-biomedical-science/#facilities
Ran into this same issue recently. I added a -1px margin to the edge with the white line.
.clipped-box {
clip-path: polygon(0 0, calc(100% - 60px) 0%, 100% 60px, 100% 100%, 0 100%);
margin-bottom: -1px;
}
I had this issue when trying to stack two sections with clipping masks. The top section had the white line on the bottom. So I pulled the next section up into it.
This issue has been spotted before, see Clip-path on Chrome leaves a strange line on the edge and CSS - Strange border appearing on Chrome mobile with clip-path
It appears to be a Chrome rendering bug.
For your case, I was able to make the line disappear by setting a height to your polygon container:
.course_page #facilities .facility--menu {
clip-path: polygon(0 0,100% 5%,100% 95%,0 100%);
height: 25em;
}
The height is only slightly higher than current.
No other CSS properties I've tested seem to have an effect on the line.
I have problem with linear gradient in mozilla firefox. Following css code:
background: linear-gradient(180deg, black 20%, darkorange);
html {
height:100vh;/* demo purpose*/
background: linear-gradient(180deg, black 20%, darkorange);
}
For all browser produces nice background smoothly transforming from black to orange color. However it doesn't work in Firefox. It produces lot of thin orange and black lines one each after other. However, when I change first parameter to 90deg (horizontal gradient), it works as it is supposed to. What I'm doing wrong? I've read similiar question from stackoverflow about this problem, but no solution worked for me. And yes, I tried to change to -moz-linear-gradient and it isn't working either (I'm using latest version of FF browser, so it shouldn't be a factor anyway.
Thank you for help in advance.
JS-fiddle link (not much to fiddle there though):
Hmm I tested here in code snipped added by GCyrillus and it's working correctly. However when I'm testing it in my browser or JS Fiddle it still produces strange result as shown in this image:
Imgur
You need to ensure the element you're setting a background on has a height, either explicitly set or due to content.
.test {
width: 100px;
background: linear-gradient(180deg, black 20%, darkorange);
float: left;
}
#test1 {
height:200px;
}
<div class="test" id="test1">Test</div>
<div class="test">Test</div>
I'm trying to use repeating-linear-gradient on a border that has a 1px wide line with 6px of spacing between each line.
Can someone tell me what I'm doing wrong so the lines are not the same width when they repeat? I've tried tweaking the pixel values but they never match up.
JSFiddle
background: gray repeating-linear-gradient(-45deg, transparent, transparent 1px, #fff 1px, #fff 6px);
Based on this CSS Tricks article by Ana it seems like the browsers have rendering differences when it comes to repeating-linear-gradient. There are comparison screenshots at the end of the article which highlights how the rendering is correct in Firefox on Windows but not so in Chrome on Windows and Firefox on OS X.
Solution:
One solution seems to be set background-size and make two strokes part of the gradient (unlike the code in question where there is only one stroke). The background size is calculated as the last color stop point (14px) divided by square root of 2 (which approximately becomes 10px).
The background-size setting is mandatory because without that it doesn't work in Opera, Chrome. It does seem to make the line a bit thicker but it atleast seems to work better than before.
This works in Chrome, Opera, Edge, IE11, Firefox on Windows and Firefox on OS X.
.border {
background: gray repeating-linear-gradient(-45deg, transparent, transparent 1px, #fff 1px, #fff 7px, transparent 7px, transparent 8px, #fff 8px, #fff 14px);
background-size: 10px 10px; /* equal to last color stop point / sqrt(2) - 14 / 1.414 */
height: 50px;
}
<div class="border"></div>
Below is the screenshot from Firefox on OS X (thanks to web-tiki for the screenshot).
background: -webkit-linear-gradient(#FFFFFF, #EAEAEA);
background: -o-linear-gradient(#FFFFFF, #EAEAEA);
background: -moz-linear-gradient(#FFFFFF, #EAEAEA);
background: linear-gradient(#FFFFFF, #EAEAEA);
What I basically want to do, is to have some sort of minimum and maximum gradient length (for instance, the gradient can't be smaller than 500px, even if the background is, and neither can it be bigger than 500px, even if the background is). I have tried using this method:
background-size:500px;
(aswell as combining it with background-repeat:y-repeat), but that doesn't work, since the gradient later on repeats itself from top (and what I would like is for it to maintain its ending-color through the rest of the element).
So shortly, I'm wondering if there's a way to stop a gradient after a certain height, only allowing it to cover a part of the element (hence, preventing it from looking different on all pages, with different sized elements), without using images as background. However, I'd also like to know if using this method is worth it, both when it comes to compatibility and effort.
Thanks!
You just need to add color stops to your gradient, like so:
Working Example
body, html {
height:200%;
}
body {
background: -moz-linear-gradient(top, red 0px, white 500px, white 100%) no-repeat;
background: -webkit-linear-gradient(top, red 0px, white 500px, white 100%) no-repeat;
}
MDN Documentation for Linear-gradient
So I made the following test fiddle, and it seems that if you specify a background-size then the gradient will be resized to that size regardless of the element dimensions (note that you have to explicitly define a width and a hight for background-size to work properly in Firefox).
http://jsfiddle.net/myajouri/y4b3Z/
I have checked this in latest Chrome, Safari and Firefox and looks the same in all three borwsers.
How can I create a programmatic horizontal gradient that starts at a prescribed location (in pixles on the x-axis)?
Here's the issue- I've got an image set as background-image - ideally, what I'd like to do is declare a CSS gradient that starts close to the edge of the image (~1800 pixels) and fades gracefully to full black.
So far, the best solution I have is to have two div elements- one with the photo background and the other with a 1px tall gradient image repeated along the y-axis with a background-position that starts at 1780px.
This works, but I really want to get away from the 1px image trick. Any ideas?
<div id="photobg">
<div id="gradientbg">
</div>
</div>
#photobg {
background-image:url('photourl.jpg');
}
#gradientbg {
background-image:url('1pxgradient.jpg');
background-repeat: repeat-y;
background-position: 1780px 0;
height: 100%;
}
What I'd like to do, in theory, is use color stops at 1780 px for a CSS gradient but as I understand it, CSS only supports % values as color stops.
Reference:
CSS 3 Gradient n pixels from bottom - Webkit/Safari
No, you can use pixels with linear gradient:
background-image: linear-gradient(transparent 1780px, black 100%);
You can also combine this gradient with multiple background images on one div.
You might want to check out this jsbin, I've made for you:
http://jsbin.com/sonewa/1/edit
This block of css will do what you want
background: -moz-linear-gradient(center top , #00AFF0, #53D4FE); //this is for mozilla
background-image: -webkit-linear-gradient(top, #00AFF0, #53D4FE); //this is for chrome and safari
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00AFF0', endColorstr='#53D4FE', GradientType=0); //this is for IE
while the gradient is from color #00AFF0 to #53D4FE (top to bottom)