I am running the following code snippet:
#mydiv{
width: 2px;
height: 2px;
border-radius: 50%;
display: inline-block;
margin: 100px;
background-color: red;
animation: wave 1s infinite;
}
#keyframes wave{
0%{
transform: scale(1, 1);
}
100%{
transform: scale(100, 100);
}
}
<div id="mydiv"></div>
Normally this animation runs fine. The problem occurs when I zoom in and out my screen. After zooming in and then zooming out I see that border-radius starts getting incorrectly shown. I have taken two screenshots of how it gets:
The first image is taken on Microsoft Edge. It happened when I zoomed in and out using CTRL+ and CTRL-. Doing the same thing in Chrome also resulted in something exactly like this. The second one happened when I zoomed in and out using Chrome dev tools. I have also experienced this in the android version of Chrome (that's where I noticed it first). It didn't happen in Firefox.
I don't know why it happens, but my guess is, zooming in and out suddenly affects the calculation of CSS transform.
What is the actual reason of this bug? Is there a fix for it?
Try this
#mydiv{
width: 200px;
height: 200px;
border-radius: 50%;
display: inline-block;
margin: 100px;
background-color: red;
animation: wave 1s infinite;
}
#keyframes wave{
0%{
transform: scale(0);
}
100%{
transform: scale(1);
}
}
<div id="mydiv"></div>
Related
I am creating an animation while I got this weird issue. Below is a code snippet with a single div with some styles and animation applied to it.
When I run the code, during the animation, I can see a weird trailing effect on the extreme right side of the square.
*{
margin: 0px;
padding: 0px;
}
body{
background-image: radial-gradient(pink, hotpink);
height: 100vh;
width: 100vw;
display: flex;
justify-content:center;
align-items: center;
}
#keyframes zoominout{
0%{
transform: scale(1.0);
}
50%{
transform: scale(1.1);
}
100%{
transform: scale(1.0);
}
}
#outer{
border: 2px solid black;
height: 450px;
width: 450px;
animation: zoominout infinite 4s;
}
<div id="outer"></div>
Whenever I click anywhere or press any button, the trails disappear.
What could be causing this and how should I solve this issue?
Also, this issue occurs only with borders. Without borders, no issue is there.
Update - This issue is with chrome browser only. While using firefox, no trailing lines are visible.
It appears to be your borders that are scaling but somehow remain behind in faded form.
If we take a more minimal example - no border radius, no flexing, you can see it clearly on this square. The first has animation duration 4s and shows separate lines which is what you get but in small form on the circle. The second has animation duration 40s and show more continuous as would be expected as more frames would be possible in the time.
Here's the snippet:
<style>
#keyframes zoominout{
0%{
transform: scale(1.0);
}
50%{
transform: scale(1.1);
}
100%{
transform: scale(1.0);
}
}
#outer{
border: 2px solid black;
border-color: magenta;
height: 450px;
width: 450px;
animation: zoominout infinite 4s;
background-color: cyan;
}
</style>
<div id="outer"></div>
So, what to do about it? Somehow the borders aren't totally disappearing but are fading.
Update: here's a quick workaround - animating dimensions rather than scaling. I know it's not the best way to animate (as it possibly isn't using the GPU???) but it seems to work. Of course you'd want to put your circle (now a square) into a container which has the actual width and then use %s. It worked on Chrome, Edge, Firefox on Windows 10 and Safari and Chrome on IOS14. It also removed the slight flicker that was previously seen on Firefox and Safari [which had both worked better on the initial code than Edge or Chrome on Win10].
Snippet with workaround:
<style>
*{
margin: 0px;
padding: 0px;
}
body{
background-image: radial-gradient(pink, hotpink);
height: 100vh;
width: 100vw;
display: flex;
justify-content:center;
align-items: center;
}
#keyframes zoominout{
0%{
width: var(--w);
height: var(--w);
}
50%{
width: calc(var(--w) * 1.1);
height: calc(var(--w) * 1.1);
}
100%{
width: var(--w);
height: var(--w);
}
}
#outer{
--w: 450px;/* you don't have to use a CSS variable but this is just to make it easier to change the width/height if you need to */
border: 2px solid black;
height: var(--w);
width: var(--w);
animation: zoominout infinite 4s;
}
</style>
<div id="outer"></div>
I'm trying to animate a background image position smoothly with CSS over a longer period, let's say 60 seconds:
#movingbackground {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Bigsurflowers.jpg/1280px-Bigsurflowers.jpg');
overflow: hidden;
background-position: left center;
animation: zoomin 60s ease-in infinite;
}
#-webkit-keyframes zoomin {
0% { background-position: 0% center; transform: scale(1.0); }
50% {background-position: 100% center; transform: scale(1.2); }
100% { background-position: 0% center; transform: scale(1.0); }
}
#keyframes zoomin {
0% { background-position: 0% center; transform: scale(1.0); }
50% {background-position: 100% center; transform: scale(1.2); }
100% { background-position: 0% center; transform: scale(1.0); }
}
<div id="movingbackground"></div>
The small movements in the beginning and end are "jumping" a few pixel every second instead of moving slowly (may depend on screen size).
The reason for that is probably that there is not enough movement to fill the required number of frames, especially when the animation is eased. As I think I have seen this effect working smoothly somewhere I wonder how to work around this.
Here's a Fiddle as well.
Animation of background-position makes browser to do layout, paint and composite.
Re-layout and re-paint are heavy on CPU and cause "jumping".
Instead of that, you might apply your background to pseudo-element (or use <img> in your HTML) and animate its transform property using 3d transformation.
It will make browser to use GPU for the animation and animation will run in composition phase pretty smoothly.
See the snippet below:
html,
body {
margin: 0;
padding: 0
}
#movingbackground {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
#movingbackground:before {
content: '';
position: absolute;
top: 0; left: 0; z-index: -1;
height: 100%;
width: 200%;
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Bigsurflowers.jpg/1280px-Bigsurflowers.jpg) 0 50% / cover;
animation: zoomin 60s ease-in infinite;
}
#keyframes zoomin {
50% {
transform: translateX(-50%) scale(1.2)
}
}
<div id="movingbackground"></div>
I did some testing and came to the conclusion that it's probably impossible. (At least with transitions or animations)
The problem is the way browsers render images on a screen. The pixels of the image apparently get lined up with those of your screen.
So the picture always "jumps" exactly one pixel at a time.
That means, that the more pixels you have in your image, the more steps it will make. But when using ease-in it will always stutter in the beginning.
As I think I have seen this effect working smoothly somewhere
That was probably not realized with css.
Animation i've created works fine on Chrome and Firefox, but is pixelated on Safari (version 10.1.1) and IE11.
Tried using translateZ() / translate3d() so the gpu can render the animations but nothing happened.
I've avoided using top, left props. Had an idea of using the will-change prop but it doesn't take animation as a value.
Removing the border radius would fix the rendering issue.
Can someone explain the cause of this and is there a solution to fix this issue?
https://codepen.io/imrdev/pen/awBZOW
html ->
<div class="dot"></div>
css - >
/* KEYFRAME ANIMATION */
#keyframes ease {
0% {
transform: scale(0) rotate(0);
}
50% {
transform: scale(4)
rotate(.01deg);
}
100% {
transform: scale(0) rotate(0);
}
}
#keyframes ease2 {
0% {
transform: scale(0) rotate(0);
}
50% {
transform: scale(6)
rotate(.01deg);
}
100% {
transform: scale(0) rotate(0);
}
}
.dot {
$scale-duration: 15s;
background-color: black;
position: relative;
width: 7px;
height: 7px;
border-radius: 50%;
&::before,
&::after {
content: "";
background: red;
width: 7px;
height: 7px;
border-radius: inherit;
opacity:.3;
position: absolute;
transform: translate(0px, 0px);
}
&::before {
animation: ease 5s ease-in-out infinite;
}
&::after {
animation: ease2 5s ease-in-out infinite both $scale-duration/15;
}
}
Thanks :-)
I have not enough reputation so i can't comment yet, so sorry if this doesn't qualify as a proper answer, but have you tried changing the size to something bigger than 7px and use eg scale(1) instead of scale(4)?
if you need to scale the width and height up by 4 or 6, why not just double the original size and scale up by 2 ?
I wouldn't be surprise if safari doesn't really scale the size up, but kinda like "zooms in" and since the original size is just 7 x 7 px it gets pixelated when "zoomed in"
and regarding to the will-change: you wouldn't use "animation" but "transform"
I am working on modifying this example in some ways for use in my application. This works awesome in Chrome and FF, but in Safari, not so much. If you look you will see in Chrome the pie charts look as expected, but in Safari they are all "whole".
The css (copied from the example) looks like this:
.pie {
display: inline-block;
position: relative;
width: 100px;
line-height: 100px;
border-radius: 50%;
background: yellowgreen;
background-image: linear-gradient(to right, transparent 50%, #655 0);
color: transparent;
text-align: center;
}
#keyframes spin {
to { transform: rotate(.5turn); }
}
#keyframes bg {
50% { background: #655; }
}
.pie::before {
content: '';
position: absolute;
top: 0; left: 50%;
width: 50%; height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
animation: spin 50s linear infinite, bg 100s step-end infinite;
animation-play-state: paused; <-- Safari's issue
animation-delay: inherit;
}
I noted the second-to-last line in the code to identify the problem. When animation-play-state is set to paused, Safari will not put the animation in the initial condition set by animation-delay. Chrome and FF seem to look at the animation-delay, put the animation in the state it would be at that delay, and then stay paused.
Is there a workaround I am missing where Safari will put the animation in the initial condition and then stay paused?
I have a problem in latest Firefox browser version 34 (system: Windows 7, screen width: 1600px). I made effect with zooming images (in some container) after hover on it. I am using transform: scale(1.1) with transition: transform 0.3s ease-in-out. But when I hover on image, and after image zoom in.. it make some strange 1px-shifting. Some rendering browser bug, but I hope that existing some fix for it.
Most important CSS definition and part of HTML code:
figure {
display: block;
overflow: hidden;
position: relative;
backface-visibility: hidden;
}
figure img {
width: 100%;
transform: scale(1);
transition: transform 0.3s ease-in-out;
}
figure:hover img {
transform: scale(1.1);
}
<figure>
<img class="img-responsive" src="http://lorempixel.com/600/400/fashion/7">
</figure>
Sample with bug is online here: http://templates.silversite.pl/test/jumpingimg/
I saw also that somebody can fix it, but I do not know how, e.g. box "Our recent work" on http://demo.qodeinteractive.com/bridge/
I had a similar problem on my project. All images were position: absolute; and the transform look like that:
figure img{
transform: translate( -50%, 50%) scale(1);
position: absolute;
top: 50%;
left: 50%;
}
figure img:hover{
transform: translate( -50%, 50%) scale(1.1);
}
I replace every scale with scale3d and that solved my problem.
The final styles look like that:
figure img{
transform: translate( -50%, 50%) scale3d(1, 1, 1);
position: absolute;
top: 50%;
left: 50%;
}
figure img:hover{
transform: translate( -50%, 50%) scale3d(1.1, 1.1, 1);
}
Hope that's will fix your problem
On the link that you provided, http://demo.qodeinteractive.com/bridge/ , if you actually go here: http://demo.qodeinteractive.com/bridge/portfolio/gallery-style-condensed/two-columns-grid/ , you can see that, once looking at dev tools, that they apply a margin of "1px" on left/right side
.projects_holder.hover_text.no_space article .image img {
margin: 0 1px;
}
If you disable that style, you'll see the image move as you're describing when hovering on the image.
Therefore, your CSS for the image should be:
figure img {
width: 100%;
transform: scale(1);
transition: transform 0.3s ease-in-out;
display: block; /* (or inline-block) */
margin: 0 1px;
}
I have just run into this same problem now. The solutions here didn't fix the issue, so I'm posting what I did to get this to work.
Like OP I had a container with oveflow hidden and was the same size as the image inside it. The image would scale on hover to create a 'zoom' effect - but when initially starting and ending the transition, the image was "jumping"/growing a tiny bit on the bottom and right-hand side. This made it jumpy and not smooth.
I had calculated the dimensions of my components based off of percentages, which caused them to be non-integers (Chrome). I have a feeling Scale & Scale3d round the pixel values when scaling, which caused this jump. I gave a parent container display:table, which caused all children to have their width/heights be rounded to be an integer value. This fixed the issue for me, and the images now scale smoothly!
7,5 years later it's still an issue and the now solution is will-change css property. Only IE won't get this, but others seems to be doing fine - no more px jumping (edit: on non retina screens).
figure {
display: block;
overflow: hidden;
position: relative;
backface-visibility: hidden;
}
figure img {
width: 100%;
transform: scale(1);
transition: transform 0.3s ease-in-out;
}
figure:hover img {
transform: scale(1.1);
will-change: transform;
}
I just run over the same issue and for me it looks like that the browser corrects the decimal pixel after the scaling is done. Or some how the height and the width doesn't get scaled equals and that gets corrected in the end.
So I think the solution is to use an image with a 1 x 1 ration factor.
So for me the code of the question works fine when I use a the lorempixel with a width and height of 400px.
Let me know if that solves the issue?!
figure {
display: block;
overflow: hidden;
position: relative;
backface-visibility: hidden;
}
figure img {
width: 100%;
transform: scale(1);
transition: transform 0.3s ease-in-out;
}
figure:hover img {
transform: scale(1.1);
}
<figure>
<img class="img-responsive" src="http://lorempixel.com/400/400/fashion/7">
</figure>