I'm working on a site and I get a weird bug using transitions.
Website: http://nieuw.impress3d.nl/
I explain my actions below:
So if you visit the homepage the site is working fine and the hovers as well. (You can hover the big blocks in the middle of the page.)
If you then press the arrow to the right once in Chrome the background changes to the background color of the article and the image disappear behind it!
If I turn off overflow: hidden, it works fine, but then the whole idea of the transition would be gone.
Is this a known bug? And are there any solutions?
Thanks in advance!
Add translateZ(0) :
.project figure img,
.service figure img,
.owl-item figure img,
.service-item figure img {
width: 100%;
height: auto;
transform: translateZ(0) scale(1);
-ms-transform: translateZ(0) scale(1);
-moz-transform: translateZ(0) scale(1);
-webkit-transform: translateZ(0) scale(1);
-o-transform: translateZ(0) scale(1);
}
Related
In my css i use the following code to rotate and scale on hover:
.myclass:hover img {
-ms-transform: scale(1.1) rotate(-20deg);
-webkit-transform: scale(1.1) rotate(-20deg);
-moz-transform: scale(1.1) rotate(-20deg);
transform: scale(1.1) rotate(-20deg);
}
This code works on Chrome but not on IE11. Any help?
Thank you in advance
I was having this same problem in IE 11, I could realize that if I reduce the time of the animation could works (ex. 0.3s). But that wasn't a solution for me.
While I was reading How to fix shaking CSS transitions in Firefox: https://gielberkers.com/how-to-fix-shaking-css-transitions-in-firefox/
I found one solution (for Firefox), and I thought that could work the same concept for IE.
The idea is rotate (the minimum possible) the div or image while your making the scale. Just like this:
#keyframes loading
0%
transform: scale(1);
50%
transform: scale(1.2) rotate(0.02deg);
100%
transform: scale(1);
I made this trick and works in IE 11
I'm doing a hover effect that increases the images brightness and scales the image on hover state. For some reason the transform seems to choppy with the CSS filter. Any idea why this makes the transform choppy? Seems to be working smoothy on Safari and Firefox.
Basically I'm doing this:
.parent
width 300px
height 300px
overflow hidden
img
transition: all 1s ease-out
transform: translate(0px, 0);
filter: brightness(80%)
&:hover
transform: scale(1.1)
See full demo here: http://codepen.io/tzzo/pen/MmKeVm
Thanks.
Just had a look at the codepen on Chrome 56 and it's really smooth for me. However, if you want to increase the image brightness on hover you need to add the filter to the hover too:
img:hover {
-webkit-filter: brightness(100%)
filter: brightness(100%)
}
use this code in hover proerties-
.parent img:hover {-webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); opacity: 1.0; filter: brightness(150%);}
I can't see the issue on my machine but I have had this problem at other times
You could try triggering hardware acceleration on the element by adding transform3d
.parent
width 300px
height 300px
overflow hidden
img
transition: all 1s ease-out
transform: translate3d(0,0,0)
filter: brightness(80%)
&:hover
transform: scale(1.1) translate3d(0,0,0)
Note you need to re-apply the translate when you alter the transform in the hover rule
I came up with a lightweight and well supported implementation.
I ditched CSS filters and decided to use opacity instead. If the background of the image doesn't work well with the you have to set it separately.
img
background-color: black
opacity: 0.8
transition: all 3s ease-in-out
&:hover
opacity: 1
transform: scale(1.1)
Added working solution to my pen: http://codepen.io/tzzo/pen/MmKeVm
I have a simple GIF image that I am applying a keyframe animation to (to make it spin infinitely), and for some reason, if I hover over links elsewhere on the page, they randomly jump up or down by a pixel or two.
When I remove the DOM element that has the animation on it (the image) the jumping does not occur, leading me to believe it is somehow caused by the CSS animation somehow. This ONLY happens in Chrome, even the most recent update of Chrome.
I have read all other related questions on here and nothing has resolved it yet, it is NOT the -webkit-backface-visibility fix needed here.
Example CSS:
#mixin spin {
-webkit-animation: spin360 1.26s infinite linear;
animation: spin360 1.26s infinite linear;
}
#-webkit-keyframes spin360 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin360 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.animated-image {
position: absolute;
#include spin;
}
Example DOM:
<h3 class="header">
Heading title
</h3>
<div class="animated-image"><img src="../img/loader.gif"></div>
Working example: http://codepen.io/caseytrombley/pen/YWYqRQ
I think the problem is in chrome the img it isn't vertical and horizontal centered.
I suggest you use flexbox to centered and must be fixed
Other way is use the img like background image and put
background-position: center center;
background-size: contain;
but I can imagine it's an animated gif, in that case must be fixed with flex
I am currently facing a probably very basic issue with Safari and CSS3 transformations. I am trying to align a grey circle in the center of the screen and then to animate it.
My CSS code seems to work perfectly with any other browser but the circle doesn't align well in Safari. However if I move out the animation everything goes fine. This is the reason why I guess something is wrong with my code :
#loading_container{
width:100%; height:100%;
background-color: #26262B;
position: absolute;
}
#loading_container>img{
position: absolute;
top: 50%;
left: 50%;
width:20%; height:auto;
min-width: 200px;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
-webkit-animation: rotate 5s infinite;
animation: rotate 5s infinite;
}
#-webkit-keyframes rotate {
from {-webkit-transform: translate(-50%,-50%) rotate(0deg);transform: translate(-50%,-50%) rotate(0deg);}
to {-webkit-transform: translate(-50%,-50%) rotate(-360deg);transform: translate(-50%,-50%) rotate(-360deg);}
}
#keyframes rotate {
from {-webkit-transform: translate(-50%,-50%) rotate(0deg);transform: translate(-50%,-50%) rotate(0deg);}
to {-webkit-transform: translate(-50%,-50%) rotate(-360deg);transform: translate(-50%,-50%) rotate(-360deg);}
}
<div id="loading_container">
<img src="http://s32.postimg.org/721vouc3p/loading_icon.png" alt="Loading..."/>
</div>
The weirdest thing is that if I move to another desktop on my mac (I mean if I scroll to the left or right) and then come back to the main one with Safari opened, the circle aligns perfectly as you can see on these two pictures :
This is the result when the page has been loaded...
And this is when I move back to the main desktop without having done anything else
I know there are a plenty of other ways to do it but I would only understand what can go wrong here. Does someone have an idea how to solve this problem ?
Thank you for your help !
I stumbled into an issue with Safari on iOS yesterday so I thought I could share my solution with you.
When applying a translate(-50%, -50%) together with rotate, on iOS the translate property was ignored. transform-origin didn't help.
After trying all possible variant, I found the one that did work:
$size: 50px;
transform: translate(-$size/2, -$size/2) rotate(0deg);
So the absolute values (instead of percentages) for translate solved the problem. Hope this might help you, too!
On Firefox, when I mouseover the element the element runs the css3 animation and on mouse out the animation is reverted:
http://jsbin.com/bapen/2/watch
With the same code base, with all the webkit vendor prefixes, I don't have the same effect. So, when mouseover the element rotates but on mouseout it doesn't rotate the other way back to the initial state.
Firefox behaves in a nicer way and I guess, this is not supported on Chrome ?
The reason I've mentioned "transition of animation", it's that when testing, the property transition: all 0.45s, is what makes this work like it does on FF.
Not sure if someone more experienced can give some hints ? Thanks!
After playing with it for a while, it seems that Chrome doesn't automatically reverse keyframe animations. I don't know if there's some option to enable that or anything, but if you specify the transforms directly in the :hover css rule, it seems to work consistently across Chrome and Firefox, i.e. change this:
#keyframes rotateMe {
0% {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes rotateMe {
. . .
}
.rotateMe:hover {
animation-name: rotateMe;
-webkit-animation-name: rotateMe;
}
to this:
.rotateMe:hover {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
Then the desired reversal effect seems to work, at least it did for me. In this case it's also less code, but obviously if your real goal is something requires keyframe animations, this solution won't work.
Also I should note, for clarity, that in the original Chrome did return to the initial state (which happened to look just like the final state), it's just that it did it immediately, rather than going backwards through the animation. You can verify this by ending at a rotation that's not a multiple of 90 degrees. Similarly if you change the background color in the :hover rule you'll see that it smoothly transitions in both directions.