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.
Related
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);
Having issues making this behave properly on Safari (works fine on Chrome and Firefox): https://jsfiddle.net/my794fyx/4/
In the fiddle, the redbox should move from left to right with a shifting pivot-point. The red box is moved by animating the left property. The pivot-point is shifted by animating translateX().
The importance of having a shifted pivot point comes to play when hovering over the black box: the width of the redbox grows. The direction the red box grows in is determined by the pivot-point -- when the redbox is on the left, it should grow to the right, and when it's on the right, it should grow to the left. This can be seen working properly on Chrome and Firefox.
On Safari, when you hover over the black box and the red box grows in width, it doesn't seem to be taken into account by transform: translateX(-100%). When hovered, the red box exceeds the black box.
Looking for some work-arounds to the browser issue or alternative implementations to the problem.
You might want to try using the -webkit- prefix on the transform and the #keyframes so:
#-webkit-keyframes {
0% {
left: 0%;
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
100% {
left: 100%;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
But just remember that the original must be kept as well! And that you have to add -webkit- prefixes to that for safety, in case one does not support #keyframes without the prefix but not the transform, though it's more likely the other way around, as the above code has.
Also see: here
In this pen, the position of the repeating background gradient is animated. This makes Google Chrome render the background gradient wrong. It works fine in Mozilla Firefox.
How can I fix it?
For my body background gradient I used this:
background-image: repeating-linear-gradient(40deg, #d61e29 0px, #661011 40px);
and the animation is bg:
animation: bg 15s infinite linear;
I believe it's related to this bug - https://code.google.com/p/chromium/issues/detail?id=162538. If you remove your setting the background size to 200% you see the gradient clears up somewhat. If you reduce it to 50% it becomes smooth. I think you're going to have to take another approach to the animated background. Also notice setting the angle to 0 gives smooth gradient.
Try giving a fixed background size, in effect tiling it, so that the tiles seem nicely. background-size: 100px 100px; not sure the exact size to get the seems right. Here is a code pen - http://codepen.io/anon/pen/vuFod;
background-size: 100px 100px
background-image: -webkit-repeating-linear-gradient(45deg, #d61e29 0px, #661011 71px);
Inspired by Design Shack, I wanted to have some linkable photos zoom in slightly when hovered over. However, I want the animations to be centered, so it's like we're zooming in slightly.
In order to keep the image centered, I fiddled with top, left, margin-top, and margin-left to make it work. I'm not even sure how it works :-) but it works...
...except that the animation is actually kind of choppy and jumpy, at least in Safari - worst of all in Safari on 10.9. (Firefox and Chrome do a better job though.)
Check out the example here:
http://jsfiddle.net/MnHVk/1/
The salient piece:
.card img:hover {
height:110%;
width:110%;
top:10%;
left:-10%;
margin-top:-10%;
margin-left:5%;
}
Compare the jumpy animation to the version that doesn't try to center, here:
http://jsfiddle.net/MnHVk/2/
Can anybody think of any other way to do this hover animation that won't result in such a jumpy effect? Perhaps there's some other technique for adjusting the positioning so that when the image is hovered over, it moves smoothly?
If you use transform, it should render thru the GPU, and I think, smoothly
.card img:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-webkit-transform-origin:50% 50%;
-ms-transform-origin:50% 50%;
transform-origin:50% 50%;
}
updated demo
I am working on a website which uses multiple css3 gradients as overlay for a background tiled with texture image
site url: --snipped--
currently for header i am using following css:
#header {
background: #DBD6D3;
height: 364px;
background: -moz-radial-gradient(50% 0% 0deg,circle farthest-corner,#FFFFFF,#DBD6D3);
background: -webkit-gradient(radial,50% 59,500,50% 0,40,from(#DBD6D3),to(#FFFFFF));
}
#header .wrp{background:url('img/headerBg.png');height:100%;padding-top:40px;}
here headerBg.png is a semi-transparent texture of size 5x5 pixel, ad for body I need to create this background:
I need to know how to make this kind of radial background in CSS3, initially I had used same code as header but with rgba() for color, setting end of the gradient with 0 opacity but it created too much noise.
tried few online generators as well for CSS3 radial background but none of them were good!
This image i am using is taking up 280kbs and I want to reduce it as it significantly effects the performance! Help would be appreciated.
update:
Upload psd, can be downloaded from
http://ylspeaks.com/stackoverflow_css3.zip
and adding bounty
Edit Jan 2011:
Webkit nightly now supports elliptical gradients http://webkit.org/blog/1424/css3-gradients/, these will eventually find their way into Safari and Chrome. Faking elliptical radial gradients through css transforms will eventually be unnecesary.
Your problem has the most difficult constraints I've ever encountered, but it is an interesting challenge and it illustrates the limitations of each browsers approach for radial backgrounds, so that's why I decided on trying.
First, the rgba approach is stillborn because the opacity is going to hide some of the noise. It's better to apply semitransparent noise on top of the gradient, you can avoid the extra div by applying multiple background on the same image:
background: url(noise.png) repeat top left, -webkit-gradient(radial,50% 0,700,50% 0,100,from(#6f2813),to(#B9513D)) transparent;
You may notice the color property at the end of declaration, it looks weird but this how you declare colors when you apply multiple backgrounds.
Second, webkit doesn't support elliptical backgrounds, so the work around to this is squishing the gradient through -webkit-transform and positioning it a bit further up:
-webkit-transform: scale(1, 0.7) translate(0, -350px);
For sanity, the right thing to do would seem be applying circular backgrounds on both FF and webkit and then transform them. However, Firefox's transform doesn't support scaling gradients! So we apply an elliptical background:
background: url(noise.png) repeat top left, -moz-radial-gradient(50% 0 0deg,ellipse farthest-side,#B9513D,#6f2813) transparent;
But, since Webkit's container is squished, Firefox's gradient is larger! At this point we would think about applying different css rules for the height of the gradient, but since Firefox doesn't scale the gradient, we can apply the same transformation on the elliptical background the get the containers to be of the same height:
-moz-transform: scale(1, 0.7) translate(0, -250px);
And voila! we have an elliptical gradient with noise, that works on both Safari and Firefox!
http://duopixel.com/stackoverflow/gradient/
background: #702914;
background: -moz-radial-gradient(50% 0% 0deg,circle farthest-corner,#A94122,#702914);
background: -webkit-gradient(radial,50% 59,500,50% 0,40,from(#702914),to(#A94122));