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.
Related
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/
I use clip-path to create the particular shape of the blue search button.
From Chrome you see a strange line at the cutout edge, while from Firefox everything is OK.
I am not the first to point this out, but I have not found a solution.
Chrome
Firefox
The clip-path is:
clip-path: polygon(0 0, 0 100%, 15px 50%);
What mystery is this? I also found a similar issue:
CSS - Strange border appearing on Chrome mobile with clip-path
I had a similar (if not the same) issue, I fixed this by adding the following style to the element with the clip-path:
transform: translateZ(0)
I had a similar issue where the right edge of a clip path was sitting just inside of 100%. I was able to fix this by setting the right edge x-coordinate values to 101% and adding overflow: hidden; to the parent element.
clip-path: polygon(0 0, 101% 0, 101% 80%, 0 100%);
I imagine you could do the same on the left side by inputting negative values?
Image before fix
Image after fix
In my case suggested transform: translateZ(0) and transform: scaleZ(1) did not help but this one yes...
transform: skewY(0.001deg);
Any idea how can i make a text wrap inside a rotated div.
Text won't stay inside div after rotated..
Here's a screen of the idea...
Thanks in advance..
The only thing that comes to my mind to solve this problem are CSS Regions (http://html.adobe.com/webstandards/cssregions/).
I've set up a small demo to show you how it works, here's the code:
div {
-webkit-shape-inside: polygon(0% 50%, 50% 100%, 100% 50%, 50% 0%);
}
And here's the demo: http://jsfiddle.net/sandro_paganotti/ABdgB/.
Unfortunately it works only on the latest Chrome, plus you have to manually enable 'Enable experimental WebKit feature' in your chrome://flags panel.
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)
I'm trying to display only the top half of an image and the bottom half of the same image in 2 separate divs.
I've tried with the CSS property clip, but it doesn't seem to support % as a unit.
Is it just me? Do you have a solution for displaying only a half of an image?
Update (after 5+ years):
The CSS clip property is now deprecated. Consider using clip-path instead (allowing for a non-JS solution), which allows you to specify shapes with percentages. Example:
/* Bottom half of image */
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
/* Top half of image */
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
Further example to create a triangle using percentages:
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
Original:
CSS clip property does not currently support percentages:
http://www.w3.org/TR/CSS2/visufx.html#propdef-clip , latest http://www.w3.org/TR/2011/REC-CSS2-20110607/visufx.html#clipping
A solution to your problem could be to use Javascript to determine the size of the area you want to show, and then use that value when setting the clip property. Something as simple as this should do the trick:
var heightOfImageToDisplay = image.height / 2;
Sorry that I don't have enough reputation to write a comment.
There's absolutely a solution without JS.
All you need to do is
Create an svg clipPath, which allows you define whatever path you want.
Set clipPathUnits="objectBoundingBox" for responsive clip path, which allows the usage of percentage path definition
Apply the clipPath in your css code.
#your-element {
clip-path: url(#clipPathId);
}
If you want more information, please refer this answer https://stackoverflow.com/a/28312070/5692151
You could have the div as position: relative; and overflow: hidden;
Have the image inside as position: absolute;
And control how the image is displayed but setting a height to the div and adjust the top and bottom properties of the image
If you are using fixed height images and fixed height div, and you are doing this manually, why not put the image as a background, with overflow:hidden and proper background-position so it only shows the top one from the top down and bottom one from the bottom up?