This happens in Safari 6 on Mountain Lion and in the latest chrome. (Confirmed on OSX, might not happen in windows)
Please see this page for an example:
http://users.telenet.be/prullen/flicker2.html
Quickly move your mouse on and off the image and look at the text below. You will see it flickering/pulsing.
The associated CSS is below. I cannot make any changes to the .out and .in classes. Only to the item class.
I have tried adding -webkit-backface-visibility:hidden; as I read somewhere that that should fix it, but it hasn't made any difference.
Does anyone have a clue?
Thanks,
Wesley
.out {
position: relative;
display: block;
margin: 0;
border: 0;
padding: 0;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.in {
position: relative;
display: block;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
}
.item {
margin: 60px;
-webkit-transition: -webkit-transform .15s linear;
-moz-transition: -moz-transform .15s linear;
-o-transition: -o-transform .15s linear;
transition: transform .15s linear;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style : preserve-3d;
-ms-transform-style : preserve-3d;
}
.item:hover {
-webkit-transform: scale(1.3) !important;
-moz-transform: scale(1.3) !important;
-o-transform: scale(1.3) !important;
-ms-transform: scale(1.3) !important;
transform: scale(1.3) !important;
}
I'm facing the same problem: I want to scale an element on hover, and when doing so every text on the page flickers. I'm also on latest Chrome (21.0.1180.89) and OSX Mountain Lion.
Actually, adding
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
to the affected elements does solve the problem.
You said you can't change the .in and .out classes, but maybe you can add another one (.no-flicker) and use it on the affected elements.
Note: This really does seem to help fix the problem in Chrome, but Note it might cause some issues in Safari if you have elements layered with z positioning CSS properties. For instance, on my site it is causing a CSS element to flicker behind the slide transitions of the animated slide show I am trying to clean up.
I have the same problem, but fix it.
Just add the .no-flickr class to any blinking or flickering element in your project
.no-flickr {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
I've had the same problem this morning and found that the best fix was:
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
I added this to each of the two elements that make up the faces of the two sided object. Stopped the flicker in Chrome and fixed the backface showing in Safari.
Related
The following code works in all browsers except for IE.10.
MSDN website says the following (which I do not understand how to apply):
Note The W3C specification defines a keyword value of preserve-3d for this property, which indicates that flattening is not performed. At this time, Internet Explorer 10 does not support the preserve-3d keyword. You can work around this by manually applying the parent element's transform to each of the child elements in addition to the child element's normal transform.
https://msdn.microsoft.com/en-gb/library/ie/hh673529(v=vs.85).aspx
My code (I'm using CSS selectors for other reasons):
div[class^="flip"] {
display: inline-block;
}
div[class^="flip"] {
-webkit-perspective: 800;
-moz-perspective: 800;
-ms-perspective: 800;
-o-perspective: 800;
perspective: 800;
width: 313px;
height: 480px;
position: relative;
margin-right: 10px;
margin-left: 10px;
}
div[class^="flip"] .card.flipped {
-webkit-transform: rotatey(-180deg);
-moz-transform: rotatey(-180deg);
-o-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
div[class^="flip"] .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
div[class^="flip"] .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 2;
text-align: center;
}
div[class^="flip"] .card .front {
position: absolute;
z-index: 1;
background: #F5F5F5;
border: #DDD 1px solid;
}
div[class^="flip"] .card .back {
-webkit-transform: rotatey(-180deg);
-moz-transform: rotatey(-180deg);
-o-transform: rotatey(-180deg);
transform: rotatey(-180deg);
background: #F5F5F5;
border: #DDD 1px solid;
}
<div class="flip1">
<div class="card">
<div class="face front">Front content</div>
<div class="face back">Back content</div>
</div>
</div>
Could you please help me with this?
Internet Explorer 10 and 11 only partially support 3D transforms. (Older versions of Internet Explorer do not support this property).
Internet Explorer 10 and 11 'have only partial support' because:
not supporting the transform-style: preserve-3d property. This
prevents nesting 3D transformed elements.
further Reading
This property is suggested to be implemented in the next version of internet explorer, so unfortunately the current IE doesn't really support any 'good' or 'complex' 3D functionality.
Since IE will 'ignore' this property, you may be able to display a message of banner to inform users to use Chrome or Firefox for better experience (it also means you will have to implement less browser hacks to support IE in general).
In answer to your question
Note The W3C specification defines a keyword value of preserve-3d for
this property, which indicates that flattening is not performed. At
this time, Internet Explorer 10 does not support the preserve-3d
keyword. You can work around this by manually applying the parent
element's transform to each of the child elements in addition to the
child element's normal transform.
This is suggesting to apply the transform of the parent manually on the child element. So the 3d transform stated on your parent (.flip1) should also be placed on your child element(s) (.back and .front) as well.
In all versions of IE, preserve-3d does not work. In Microsoft Edge, it does.
You can apply a 3D transformation to any element, but if it's parent is 3D transformed as well then the transformation will NOT work; the element will be flattened
so IE10 or IE11 = no fun in 3D.
I use the css3 method transform: rotateY(-180deg);for display the content when the curser is hover the block.
When i click on the block with my smartphone, nothing append, how can i display the content ?
My class :
#effect-2 figure .img-hover {
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0 10px;
text-align: center;
background-color: #e74c3c;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
HTML block :
<li>
<figure>
<img src="img/cocacola.png" class="front">
<div class="img-hover">
<h4>Cocacola</h4>
</div>
</figure>
</li>
You can add a touch event for touch devices using javascript to add you class (and trigger the animation), i.e:
var myElement = //get your element
myElement.addEventListener('touchstart', function(e){
this.className = "hover";
setTimeout(function(){
myElement.className = "";
}, [animation duration]);
});
You'd set the above animation duration to match the time of your css effects (assuming they don't loop) so that it can be reused. if it does loop then you don't need to worry about it.
If you want something to work as long as the touch is active, you can trigger the removal of the class on touchend
Try this code:
-ms-transform: rotateY(-180deg); /* IE 9 */
-webkit-transform: rotateY(-180deg); /* Chrome, Safari, Opera */
transform:rotateY(-180deg);
Listen to the click event for the given element and toggle a css-class on it. Then you can specify your transformation in that class.
An example is to write your event listener inline on the element like this:
<div onclick="this.classList.toggle('transform-class')"></div>
Then later you can if you want refactor your code and bind an event listener in a separate javascript-file.
In my demo link, kindly hover the image section, see the image exceed issue.
Over flow hidden and border radius not working when i use css transition scale effects in chrome browser.
It's working fine on Mozilla Firefox, but chrome is not working correctly, i give overflow hidden & border radius but the hover image is exceed on image area.
How to solve this problem. I tried lot's of time, but i can't fix & can't find the correct solution.
kindly click the demo
http://tcxsandbox.com/stack-overflow/
And also check the 2nd comment, I have placed the fiddle link.
You must declare the parent element in relative position and child with absolute , after use z-index and declare parent (with border-radius and overflow hidden) before child . example:
<div class="parent">
<img class="child" src="yourimage.jpg" />
</div>
<style>
.parent{
/*must declare border radius and z-index*/
position: relative;
border-radius:100px;
z-index:5;
}
.parent img{ /*Child element*/
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out ;
transition: all .3s ease-in-out;
-webkit-transform: scale(1,1) ;
-moz-transform: scale(1,1);
transform: scale(1,1);
z-index:4; /*here's where magic happens*/
}
.parent img:hover{
img{
-webkit-transform: scale(1.1,1.1) ;
-moz-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
}
}
</style>
this should work.
NOTE: i recommend declare border radius for both elements (parent and child ) for prevent crossbrowsing problems .
consider below code:
.box-main-img {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
}
Add border-radius to your box-main-img class
.box-main-img {
float: left;
width: 100%;
overflow: hidden;
height: 143px;
border-radius: 5px;
}
FIDDLE
I am not very good at CSS3 animations so I need some help to improve the output.
I am trying to achieve the Windows8 tile effect and I am nearly done.
I am trying to achieve this
and here is the jsfiddle
The CSS which flips is the following.
The suffix '1' is for block1 ,'2' for block2 and so on 'til 5 for five blocks.
/*block one*/
.flip-container1, .front1, .back1 {
position:relative;
width: 432px;
height: 140px;
}
.flipper1 {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front1, .back1 {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
background: #2FB1BE;
}
.vertical1.flip-container1 {
position: relative;
}
.vertical1 .back1 {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.vertical1.flip-container1 .flipper1 {
-webkit-transform-origin: 100% 70px;
-moz-transform-origin: 100% 70px;
transform-origin: 100% 70px;
}
#keyframes myFirst{
from{
webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
to{
webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
transform: rotateX(180deg);
}
}
#-webkit-keyframes myFirst{
from{
webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
to{
webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
transform: rotateX(180deg);
}
}
.vertical1.flip-container1 .flipper1{
animation:myFirst 3s;
-webkit-animation:myFirst 3s;
animation-direction:normal;
-webkit-animation-direction:normal;
animation-iteration-count:infinite;
}
Now I want to solve the following two problems:
1- I want that only one tile flips at a time.
Currently, I have applied different animation times which looks fine but multiple tiles are flipping at a time.
2- I want the animation of a particular tile to stop when the backside is shown and then move to another tile and when again its turn comes then front side is shown again. Currently, it shows front side and then immediately shows back side and then pauses for a while.
For your first problem, you'll want to use the :hover pseudo tag, and if needed also use tile-specific ids.
I don't quite understand what you mean by "then move to another tile and when again its turn comes then front side is shown again". But, you have animation-iteration-count: set to infinite so of course the animation will continue on infinitely.
It seems you don't quite understand CSS animations/transitions fully yet. Perhaps you should practice with just making a box grow on mouse hover, then work your way up to making just 1 box flip. W3Schools has a great reference to CSS Animations.
Ever since I added a css transition (first one was on hover, second was an animation) it seems to have messed up my fonts, they look 'different'.
It's totally bizarre, I've looked for hours and can't find anything on it, nor can I figure out exactly why it's happening.
It seems to be ok in firefox, but safari and chrome are having problems.
http://www.simplerweb.co.uk
Everything below the gear animation at the bottom left seems to look like a lighter font weight and the navigation menu seems to look the same.
I am totally lost on this one.
Here's the CSS for the animation.
.gearone {height:100px;
width:100px;
top:-10px;
left:-10px;
position:absolute;
background-position:center;
background-repeat:no-repeat;
background-image:url(../images/gearone.png);
-webkit-animation-name: backrotate;
-webkit-animation-duration: 13s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function:linear;
-moz-animation-name: backrotate;
-moz-animation-duration: 13s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
}
.geartwo {height:100px;
width:100px;
position:absolute;
background-position:center;
background-repeat:no-repeat;
background-image:url(../images/gearone.png);
top:20px;
left:10px;
-webkit-animation-name: rotate;
-webkit-animation-duration: 13s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function:linear;
-moz-animation-name: rotate;
-moz-animation-duration: 13s;
-moz-animation-timing-function:linear;
-moz-animation-iteration-count: infinite;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes backrotate {
0% {
-webkit-transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
#-moz-keyframes backrotate {
0% {
-moz-transform: rotate(360deg);
}
100% {
-moz-transform: rotate(0deg);
}
}
I think I had a similar issue, and what fixed it for me was adding
-webkit-font-smoothing: antialiased;
to my body css. When animation of any kind happens, webkit tries to antialias the text to help with the animation, so adding it to begin with prevents it from changing or looking different.
i had the same problem. wile the execution of a webkit transition some anchor text became antialiased.
after many tries i've found that this happen just in elements that are positioned and have z-index with inside other elements positioned too and with z-index.
#footer {
bottom: 0;
left: 330px;
right: 100px;
height: 75px;
background-color: #231f20;
min-width: 540px;
min-height: 75px;
position: fixed;
z-index: 10;
}
inside the footer i have
#cityNav > ul > li a {
font-size: 24px;
text-transform: uppercase;
position: relative;
z-index: 110;
line-height: 24px;
height: 24px;
display: block;
}
and this is my transition
.circle {
position: absolute;
top: 0;
left: 0;
display: block;
background-color: #ff0000;
width: 20px;
height: 20px;
cursor: pointer;
text-indent: -999em;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
.circle:hover {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}
I was having this issue in Chrome for OSX. Using -webkit-backface-visibility: hidden; fixed the problem.
I've faced this issue numerous times and have had success adding the following css to the animated element:
z-index: 60000;
position: relative;
It seems it needs both z-index and position to be effective. In my case I was using it with Font Awesome animated spinners.
What you're seeing is webkit anti-alias your text because it's treating it as a texture as opposed to a vector. There's not much you can do, other than not using transformations, or using an text replacement to provide an image instead of your type.
There's a few related threads regarding webkit aliasing, but I haven't personally had much luck keeping the type as type, and still using transformations.
I'm not exactly sure of the reason why it's happening, but it looks like when your .geartwo element (100px x 100px) overlaps your text, it seems to lighten it. When it rolls off of it, it's back to normal. I too, notice this only in webkit browsers.
To fix it, you can set the gear width and height to 40px (that's the size of the image anyway -- I don't see the need for it to be 100px x 100px), and then re-position it accordingly.
EDIT: I'm not sure that you need to do this after my proposition, but I found this related discussion after a bit of searching.
As stated above, -webkit-font-smoothing: antialiased; works on desktop Safari.
But on iOS, you need to use -webkit-backface-visibility: hidden; in order to fix this.
While -webkit-backface-visibility: hidden; is a partial solution; it really ruins the display of your text, especially if you have smoothing / AA enabled. This bug is nasty too, because it happens only when you are using the transform property as well.
After roughly 2 years of sporadically visiting this topic every other month, I found a fix. You need to add a position:relative to the css element that is being animated. There is a catch though, you need to give it a z-index value that is greater than or lower then the element that you see the distortion on. This fixes it 100%.
Since topic doesn't have a 'definite' answer, I hope this answer helps someone who was in the same boat I was in for years.
For iOS8, the only way I succeeded in removing the transformation flickers was by adding
body * { -webkit-transform: translate3d(0, 0, 0); }
to my stylesheet.
All you need to do is add this CSS rule to any element that you are seeing the flicker on:
-webkit-transform-style: preserve-3d;
And that's it.