I am experiencing an error in Firefox with elements that flip on hover. (The error can be seen in the attached screenshot).
The elements are css only, using box shadow, border-radius and things like
(*-)transform-style: preserve-3d;
(*-)transition: all .5s cubic-bezier(.8,.1,.3,.9);
(*-)perspective: 600px;
(*-)transform: rotateY( 0deg );
I could not find out why this error occurs, any ideas?
Additionally sometimes there is an error with the shadow.
Cheers,
Lukas
It seems to have been fixed with the new Firefox build.
Related
I am experiencing some weird issues with CSS scale transitions. The scaling works fine, however there are some weird lines around the scaled element, which disappear after scrolling. This happened in a Chrome browser and in Microsoft Edge. And I don't assume it has something to do with margin, padding, the z-index, colors or anything else along those lines, because it happened with and without these properties being included in the relevant CSS.
This is the relevant CSS as a quick draft:
.element {
background-color:black;
transition: transform 0.5s;
transform:scale(1, 1, 1);
}
.element:hover {
transform:scale(1.1, 1.1);
}
Here is a quick recording to demonstrate that: https://streamable.com/cyvkjm
Here is also a screenshot for those who can't see the video for some reason:
Your streamable link worked fine for me. I remember having a problem similar to that a while ago, and it was something to do with using 3d scaling
Check this out though, I'm fairly certain backface-visibility: hidden and the -webkit equivalent will fix it. As I can't reproduce this I can't be of much more help
CSS transition on element leaving lines
Edit: after reproducing the problem we found a fix. Tested and works in Chrome/Edge/Firefox. perspective(1000px) seems to work better than perspective(0)
.element {
transform: scale(1) perspective(1000px);
}
.element:hover {
transform: scale(1.1) perspective(1000px);
}
Hey guys i have this carousel for which the arrows are created entirely in CSS , see HERE.
Now the arrow has a slight error on hover i have applied the following code to the arrow circle:
CSS:
.arrow-outer-prev:hover,
.arrow-outer-prev:focus,
.arrow-outer-prev:active {
-webkit-transform: translateX(-5px);
-ms-transform: translateX(-5px);
-o-transform: translateX(-5px);
transform: translateX(-5px);
}
(The fiddle does't show the error , so i will be sharing a link).
Now on shower my intertion is to move the circle, but an error occurs and along with the circle the arrows also tilt slightly , SEE GIF.
The error can be seen on this link too HERE.
The bug looks slightly different in FF and chrome. In chrome the bug looks even more awkward though. unfortunately i have not been able to reproduce this bug , nor has debugging in chrome using dev tools worked for me.
Can somebody point out to me what am i doing wrong here ? Why is are the arrows moving when the CSS is clearly for only the circle to move ?
I have one strange bug on my website. When i trying to transform block with text by using
transform: translateY(0px) translate3d(0,0,0) translateZ(0);
i got this block but with black (or white) stripes behind the text. I suppose in depends what background is - light or dark.
I can't attach the screenshot for example, so i leave a link.
Animated blocks - text block that appeared when you scroll the page.
This animation perfectly work in all browsers, but not in Firefox (windows ver.).
Maybe someone saw this and could help...
Thanks!
I solved my problem by setting
outline: 1px solid transparent;
property for each animated block on the page. It was helpful.
I found this solution in this answer.
This might be a result of a bug that I have encountered. There are still quite a few of optimization problems when it comes to transitions, in any browser, but particularly Firefox.
Have you tried setting perspective: 1000; to the parent element? It's served as a quick fix to some of these problems.
Nice website, by the way!
I'm running into a weird problem that makes a div invisible.
My goal is to create a shadow for a 3D object, in perspective.
Because a shadow is blurry, I am using -webkit-filter: blur(8px);, but when I try to add perspective with -webkit-transform: rotateX(45deg);, and the amount of degrees is more than 45, the div just disappears.
My Chrome version is 27.0.1453.47 Beta
Check out this fiddle to reproduce the problem for yourself. (Chrome only.)
I hope you guys know more about this problem:).
I'm trying to apply some CSS3 transitions on some headers in a website I'm working on, but there's something about transitions on elements that contain text that really bugs me: in browsers that apply hinting or grid-fit a font's glyphs (which I guess is most of them, bar perhaps Safari), there is a noticable 'jump' at the beginning and end of a transition where you can see that text is snapped back to the pixel grid, as demonstrated in this jsfiddle: http://jsfiddle.net/8csA9/20/ (part of this is probably a momentary 'blur' due to filtering, but there's definitely some shape modification going on here, at least in FF and Chrome)
Normally I'd not even consider messing with the intricacies of font-rendering, but considering the glyphs are so large I feel that it doesn't really matter in this case, and was wondering if there is either a way to disable hinting, or some other way of making these transitions a bit smoother. Does anyone know if this can be done, and how?
PS: This question actually extends a bit beyond just transitions, just applying a static rotation also makes at least Firefox continue to hint the text, and the result ends up looking rather.. odd
PPS: There does seem to exist (or have existed) a '-webkit-font-smoothing' property, but the CSS3-fonts draft appears to have dropped the rule it was based on (font-smooth), and it seems it only ever worked on Chrome for the Mac
Use backface-visibility: hidden;
**Update: webkit moz mz and the standard
http://jsfiddle.net/jugularkill/58S2z/4/
More on backface visibility:
http://www.w3schools.com/cssref/css3_pr_backface-visibility.asp
This worked like a charm for me. I added "backface-visibility:hidden" (plus major browser prefixes) to the elements with the transition property, and it fixed the jump/jitter I was experiencing during the transition. I tested in Firefox, IE (9/10) and Chrome.
One thing I noticed though: Make sure you add the property to the element's natural state, as opposed to the pseudo-class (e.g. hover, active...) of an element.
For me I found that I needed to add both backface-visibility: hidden and transform-style: preserve-3d to the element that contained jumpy content.
For example:
.element-with-jumpy-content {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
If you're using Bootstrap you can use this class:
.backface-visibility(hidden);
Adding transform: translate3d(0, 0, 0); or transform: translateZ(0); often helps to fix transition bugs, because it forces browser to use hardware-accelerated 3D transitions.