I'm using webkit-perspective to animate slide transitions in css. It works well on all major browsers except safari.
The second slide has a flicker on the text. I found solutions here that includes -webkit-backface-visibility: hidden;
on the parent element. But it didn't work for me. The site is: http://www.venicedev.com I think this is happening because of my canvas element on the back of the text. But I can't found any turnaround for this.
Anyone can help me with this?
adding z-index:1; seems to have helped
Related
I have a weird rendering glitch on a webpage in google chrome. I reproduced it under Mac Chrome, and Chrome under a parrallels virtual machine in windows.
It's supposed to be a simple draggable div. But, when you drag it around, it looks like this: http://imgur.com/VdY3Tv2
The situation is pretty unusual; it's a container div with a css transform matrix, containing an iframe, with a draggable div.
I created a demo. Just drag the div around: https://www.dropbox.com/s/cjq39w82mghuze2/bug.7z?dl=0
Any idea what causes this?
[edit]
I still have no idea. But: updating the transform matrix of the parent element (in my case, I was using fit.js, and call watching.trigger()) forces a redraw. So, that might be a useful workaround that helps people. :)
I found an actual fix that is not stupid and half-working like my earlier attempt.
iframe {
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
}
To clarify, to any iframe in which you have this happening, apply the above CSS.
No more glitches. Stupid, I have no idea why it worked, but I just tried random things, and then this worked. I'm guessing it enables some kind of different rendering flow that avoids this bug, whatever it is.
I am wondering why I am seeing a flickering effect on an element when using transition: all 0.5s ease-out; in FireFox (latest as of this writing). It's hard to explain, but see live example here: http://imaginary-material.launchpage.me/ (check out the logo flickering) - this issue does not happen on Safari or Chrome.
update
In my original code I had the transitions applied to the a tag wrapping the img and the img. Removing the translate from the a tag gets rid of the flicker, so that solves my problem. However that is still a mystery to me, if anyone cares to comment on why it would cause flicker, please do so.
Found solution you are using Very big images [1024 resolution] instead of thumbnails!
Use light images for flicker-less transitions!
Try this for images src="http://placekitten.com/120/120" demo it will not flicker! Checked
Check this codepen: http://codepen.io/anon/pen/KkgeL/.
How come it's so glitchy when animating it? I'm on Chrome v.33. Works perfectly fine in Safari and Firefox (Safari glitches the same way as Chrome [read below], but instead of the width it's the height).
edit: I can try to explain the glitch for those of you who don't see it. It animates all properties somewhat OK, but at the very end of the animation, the width of the 3 divs instantly changes by a handful of pixels which is very, very undesirable.
For those of you who use Chrome and doesn't see the glitch please comment with your Chrome version.
I'm not sure yet of what is this about, but I added a delay on the transition of .logo > div and the problem was solved but I don't know if you can retain this transition.
Try it and let me know
-webkit-transition-delay: 1s;.
So i have this fiddle: http://jsfiddle.net/aA9Rm/1/ . It works just fine in firefox, but i have some issues with it in chrome, and i can't understand why. In firefox if i move the mouse after the hover in the workhover container it works fine, doesn't do anything, but in chrome if i try to click or move an inch, it starts to move (shake) and I don't want that.
I use 3D rotations, from CSS3,
-moz-transform: rotateY(-90deg);;
-webkit-transform:rotateY(-90deg);
transform:rotateY(-90deg);
Solutions anyone?
I think you encounter the same bug from this question :
CSS Flip Transition Between Two <div>'s
It looks like a chrome bug where the div you're trying to rotate is rotating a bit too much. I can fix your jsfiddle on Chrome by changing this CSS (see the webkit degree) :
.cube:hover{
-moz-transform: rotateY(-90deg);
-webkit-transform:rotateY(-89.9deg);
transform:rotateY(-90deg);
}
It's quite hacky but I never found any clean solution.
You can also use pointer-events: none; property in some way to make it works.
See the grey box on this page: http://goo.gl/fL973
When you hover it it's suppose to flip over and show the other side. It works in Chrome, but for some reason i'm getting a lot of flickering during the animation. I tried fiddling around with the rules and even adding a container around the box, but no success.
I read this question, among others: Why is rotateY (flip) css3 animation flickering in Chrome?
The problem seems to be that elements with backface-visibility: hidden; cannot have backgrounds. So, as a workaround, i thought i could have an element inside .front and .back and give that element a background. That didn't work, still flickered.
Other than that, i'm also not sure why it only works in Chrome/webkit. I do have the necessary prefixes for everything, so it should work, shouldn't it?
Any suggestions?
Works fine after moving the backface-visibility: hidden; to the .front and .back instead of .card. The flickering disappeared. Now i'll just have to come up with some fallback for non supporting browsers.