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);
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.
Here is a demo of my problem :
Demo
I have two absolute images and each of them animates clip-path. While second comes after first in the DOM I can see the hover animation. But I cant see the hover animation of first. So my idea was that whenever I hover first I also hover second by the amount first hovers.
So basically:
hover first --> expand clip-path of first --> shrink clip-path of second
hover second --> expand clip-path of second --> shrink clip-path of first
So far I tried the + connector, so for example:
.first:hover + .second {
}
But this will animate the second if I hover the first, so this does not help.
Any Ideas?
Your idea is right:
.first:hover + .second {
-webkit-clip-path: polygon(100% 0, 90% 0, 50% 100%, 100% 100%);
clip-path: polygon(100% 0, 90% 0, 50% 100%, 100% 100%);
}
Fiddle: https://jsfiddle.net/sb4bk0xg/3/
I have an animation that is working beautifully in Chrome but is not registering at all in Firefox. It is an animation that mimics how an old tv might turn on. Starting from the middle of the 'box' spreading into a horizontal line, and then finally spreading upwards and downwards simultaneously to fill the 'box'.
The following is my CSS.
#keyframes tvOn{
0%{
clip-path: inset(49.9% 49%);
}
45%{
clip-path: inset(49.9% 0%);
}
100%{
clip-path: inset(0% 0%);
}
}
#box{
...
animation: 1s ease tvOn;
...
}
Is inset what is not supported? I even tried 'rectangle' and 'polygon' but neither seem to work. If you know of a Firefox polyfill that can solve this problem or an alternative I appreciate it. This clip-path inset is working beautifully, I can't achieve the same result this easily with any other css property I've tried. Even animating the width and height is tricky because those grow from the top left corner, instead of the direct center/middle of a 'box'.
Also I don't want to animate the box growing a bigger size, its more about revealing a completely hidden box in a unique way slowly across both axes to make it seem like a tv turning on.
Check out this pen in Chrome and then Firefox:
http://codepen.io/richbrat/pen/fLdFw
In Chrome the SVG is scaling appropriately but not in Firefox. Why is that, has it got something to do with preserveAspectRatio in SVG?
The SVG is here:
https://s3-us-west-2.amazonaws.com/s.cdpn.io/156826/bg.svg
Check out CSS
background-size: 100% 100%;
Take a look at Browser compatibility: http://caniuse.com/#search=background-size
For this effect that you look for, a linear background could be used as well :
background: #e8f5fa linear-gradient(to bottom right, transparent 51%, #DAEAF3 50%) ;
For the background-size, it can be written this way too:
background: #e8f5fa url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/156826/bg.svg') no-repeat 0 0 / 100% 100%;
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?