This template I have made using CSS3 3D transforms is flickering like crazy in FireFox 15 (and possibly older versions? It did seem to be fine a few months ago before an update). I've managed to stop the flickering by removing the container's perspective property, but that's not ideal. If I delete all the child element with Firebug, the problem persists.
Any ideas? It works as expected in all other browsers! I realise this technology is new and unstable, but the flickering is pretty awful in Firefox and absolutely fine in Chrome and Safari.
http://iamalexkempton.net/themes/vFlip_v1-1-preview/template/index1.php
Thanks in advance. :)
Translate3d is buggy (if that's what you're using). RotateY should work fine. It at least solved my flickering and weird rotation.
See: https://bugzilla.mozilla.org/show_bug.cgi?id=769892
Offtopic: Nice site! Works fine here in FF.
use perspective: 1000px; on the containder of a element with the transform should work
Regards
Related
I am using animations from the animate.css library.
Everything looks good until I check the site on my iPhone. It works fine when I use the chrome developer tool device toolbar iPhone setting.
The background while the animation is going on gets distorted, it seems like it is zooming in really far.
I am using the fadeInDown and bounceInUp animations which I read might increase the document height?
Any suggestions or help is greatly appreciated!!
You can set Overflow: hidden to Parent container. So that it will not increase the height when animating.
Tested and verified ;)
Thanks
I have built the following page a while ago: http://www.cnplumbingandheating.co.uk/#page=about
However, the ID card (images/id-card.png) disappears in Firefox, although behaves as intended in Chrome, Safari and Opera. It was working in Firefox some time ago, and I have not edited the files or code since, yet this bug has appeared...
Can anybody shed any light as to what might be the cause, particularly if you cannot replicate it?
NOTE: The image reappears if you hover over it, but disappears on mouseout. There is no CSS/JS affecting this (as far as I can see).
I can't replicate the problem. I think it's working fine. Maybe a caching issue.
Anyway have a look. This is what i see when the page loads:
and this is when i hover the id card:
It seems it works well. By the way, nice website.
Is border radius supposed to work the Firefox way or the Webkit way? Basically, in Firefox if the element with the border radius has overflow hidden the content is clipped by the radius, in Webkit it overflows. The Firefox way certainly seems by far the most obviously logical.
If that is how it is supposed to work does any one have any idea when Webkit is going to fix it or is this going to be one of those god awful IE6 style browser discrepancies?
As far as I can tell, this is https://bugs.webkit.org/show_bug.cgi?id=68196
The way this currently works in Chrome is a bug.
I have posted to the Chrome developers and they have confirmed that and believe it will be fixed shortly. Follow progress on the link below
https://groups.google.com/a/chromium.org/group/chromium-bugs/browse_thread/thread/2245dc43377a067d
Seems like an update on google chrome messed up my canvas animation. Currently I´m getting lots of flickering, this seems awkward because I haven´t changed any of the code and it worked smoothly a couple days ago. Am I the only one with this problem?
ps: the animation works fine in firefox.
Are you using double buffering? You should expect flickering unless you are using a buffer. See Does HTML5/Canvas Support Double Buffering? and Google search
try using requestAnimationFrame: https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame
I have been trying to play a bit with the CSS3 and build a Netscape logo purely out of CSS3 for training.
Here is the link:
http://alonbt.com/css3/netscape/
The thing is: In Firefox all looks well, but in Chrome something goes wrong. I assume this is the overflow:hidden I have - in Firefox it works but Chrome doesn't seem to render it well.
Any suggestions bout what might be the problem?
I've detailed this issue here: http://tech.bluesmoon.info/2011/04/overflowhidden-border-radius-and.html
In particular, you're being hit by https://bugs.webkit.org/show_bug.cgi?id=50072
The issue shows up in Safari too.
You can workaround this problem if you don't use relative positioning. Try getting rid of the 'position: absolute' CSS property and use negative margins instead (e.g. in your case, something like: 'margin: -204px 0 0 -475px;').
Pay attention however that you'll have to compensate somehow on item ordering (you no longer have control over z-index but you need it).
I had the same problem in Chrome on a Windows computer, a img in a div, with overflow:hidden on the div. On a Mac everything showed fine, but Windows Chrome ignored the overflow:hidden. My solution: -webkit-transform:scale(1); on the img (the child).