So i got this transitioned scaling on hover, but sometimes theese strange bugs appear.
http://i.imgur.com/us1iXgF.png
I've read something about putting a z-index value will fix it, but it doesn't. This appears in Chrome. When looking in Canary, the bugs doesn't appear, but do anyone have a temporary solution?
.menu-item {
transition: transform ease .25s;
}
.menu-item-wrap:hover .menu-item {
transform: scale(1.1);
}
Related
I have a WordPress website where I use Visual Composer with fullpage sections. I've added a zooming background using CSS. It's on the following URL: http://white-vision.nl/particulier/
.upb_row_bg {
animation: leaves 20s infinite;
}
#keyframes leaves {
0%, 100% {
transform: scale(1.0);
}
50% {
transform: scale(1.1);
}
}
It looks like it works great, but in Google Chrome when scrolling up (so from 3rd to 2nd section) it gets a white transparent overlay and the videobox is pushed down. When you scroll down (so from 1st section to 2nd section) everything works fine.
This is only a problem in Google Chrome (on Mac and Windows). It works fine in Firefox, Edge and Safari. Does anyone have an idea how to fix this? Thanks in advance!
PS: When deleting the zoom function, there is no problem.
The parent element with classes fp-tableCell vc_row-has-fill is getting a change on its inline styles. One of the properties that are been changed is opacity: 0.107967. This is what makes your background look transparent.
You should try to access this element via javascript and force it to stay at opacity: 1. If you are not able to do that via script, you could force that elements' opacity by adding:
.vc_row-has-fill {
opacity: 1 !important;
}
This will overwrite the changing opacity on the inline styles.
I'm having a strange problem where rendering an emoji rotated to certain angles results in the emoji failing to appear.
This seems consistent across browsers, so I'm struggling to pinpoint the issue or a reasonable solution.
The code:
<style type="text/css">
.container {
background-color: #55d;
height: 500px;
padding: 50px;
width: 500px;
}
.text {
color: #fff;
font-size:2em;
margin: 100px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
<div class="container">
<div class="text">This is some text 😂</div>
</div>
See http://codepen.io/anon/pen/ORgQjb for a working example, note that changing the rotation, even to 44.5 degrees will bring the emoji back.
Does anyone have a suggestion as to why this occurs, or any workarounds?
Update
Thanks to Paulie_D and some digging, it seems this issue only manifests itself on OSX (all browsers), and not Windows (tried IE/Firefox/Chrome).
I sure don't know why it happens, but after some tinkering, I do have a couple of fixes to share.
Webkit
If a Webkit-only fix is sufficient (e.g., if you're building an Electron app), you only need to add the CSS transform perspective(0), which has no visible effect, other than causing emoji to actually render.
So:
transform: rotate(45deg) perspective(0);
instead of:
transform: rotate(45deg);
Here's a fork of your example demonstrating that fix:
https://codepen.io/troywarr/pen/yEgEdr
and a reduced test case including a reference emoji to illustrate that perspective(0) doesn't change the emoji's appearance:
https://codepen.io/troywarr/pen/aKpKmx
Cross-browser
If you need a cross-browser fix, you can use a CSS animation that rotates starting at 45 degrees (or whichever multiple of 45 degrees that you need to fix) but is eternally paused:
#keyframes spin {
0% {
transform: rotate(45deg);
}
}
.working-rotated-thing {
animation: spin 1ms; /* animation-duration must be > 0 */
animation-play-state: paused;
}
Here's a fork of your example demonstrating that fix (note that I enabled Autoprefixer to avoid messing with vendor prefixes):
https://codepen.io/troywarr/pen/mKRKZB
and a reduced test case:
https://codepen.io/troywarr/pen/oyByMx
This seems to work across browsers; I checked the latest Chrome, Firefox, and Safari in macOS High Sierra, and all were well.
While trying to fix one bug I've come across another, pretty sure it was when my version of Firefox updated today. I'm trying to scale an image slightly on hover for a zoom effect.
I was having trouble in Firefox with the image shifting / wiggling after using transform: scale/scale3d. Something to do with half pixels I assume. I've seen this issue being discussed before - ie. here and here, but none of the solutions mentioned anywhere worked for me. In the end I managed to 'fix' it by tweaking either the scale ratio or the actual size of the image file.
But then a stranger bug started happening in Firefox (v.45.0.1) , where the image flashes a small version of itself when you first hover over it. This only happens once, but can be recreated again by doing a normal page refresh. Happens with other transforms as well as scale, eg. rotate(). Is there anything I can do about this other than submit a bug report & wait for Firefox to fix? And has anyone else noticed this / does it happen in older Firefoxes?
Also if anyone has a better fix for the image wiggle issue, that would be amazing :)
I've set up a Codepen example here trying different fixes for the wiggle issue, but the Firefox bug can currently be seen on all the icons.
.hoverPop {
-webkit-transition: all 0.5s cubic-bezier(0.42, 0, 0.42, 1);
-webkit-transition: all 0.5s cubic-bezier(0.42, 0, 0.42, 1.75);
transition: all 0.5s cubic-bezier(0.42, 0, 0.42, 1.75);
}
.hoverPop:hover {
-webkit-transform: scale3d(1.2, 1.2, 1.2);
transform: scale3d(1.2, 1.2, 1.2);
}
img {
border: 0;
vertical-align: middle;
max-width: 100%;
}
.imgwrap {
width: 65px;
margin: 0 auto 12px auto;
height: 65px;
}
<div class="imgwrap">
<img class="hoverPop" src="http://i1175.photobucket.com/albums/r631/Bananafarma/testIcon_zpsfrhmw5qd.png" alt="test">
</div>
Cheers :)
I solved this by adding following. This fixes FF v45.0.1 bug which displayed the smaller image on hover with transition for me.
img {
image-rendering: optimizeQuality;
}
I have this issue with a DIV being rotated with CSS3 transforms using a 1s transition:
In Chrome 23 & Safari 6 on OSX 10.7.5 the font in the other containers gets slightly dimmed, during the .rotate-divs transition.
Any ideas on what causes this and how to avoid it?
http://jsfiddle.net/tTa5r/
.rotate{
background: green;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.rotate.flip{
-moz-transform: rotate(540deg);
-webkit-transform: rotate(540deg);
-o-transform: rotate(540deg);
transform: rotate(540deg);
}
the flip class is added/removed using jquery:
$('.rotate').on('click', function(){
$(this).toggleClass('flip');
});​
-webkit-backface-visibility: hidden;
also worked for me... adding it to the elements I have transform on
p.s. I would vote the previous answer up but I cant as I dont have enough "reputation", nor can I see how to comment on it
adding
-webkit-backface-visibility: hidden;
to all affected elements, seems to help with that issue: http://jsfiddle.net/tTa5r/2/
while i'm not sure what this property excatly does
it seems to do something to the font rendering:
http://jsfiddle.net/tTa5r/ vs http://jsfiddle.net/tTa5r/2/
...not sure if i dislike that, though.
found here: iPhone WebKit CSS animations cause flicker
The backface-visibility property determines if the element should be visible or not when it's faced away from the screen, commonly used when you "flip" and element.
In this case, it seems that it has the same effect as when you add:
-webkit-transform: translate3d(0,0,0);
Demo - http://jsfiddle.net/tTa5r/4/
which forces hardware acceleration giving you a slightly thinner (anti-aliased), but a more consistent font rendering before and after the transition.
There is a third option as well, and that is to add:
-webkit-font-smoothing: antialiased;
Demo - http://jsfiddle.net/tTa5r/3/
I answered a similar question before and #mddw posted a comment linking to a blog post that describes the methods of antialiasing which seems to be the reason for why you see a differens during and after the transition.
http://cantina.co/2012/05/18/little-details-subpixel-vs-greyscale-antialiasing/
Hope that helps!
I have a simple animation like this:
.elem:hover {
-webkit-transform: scale(1.3);
-webkit-transition: all .4s;
}
When I hover, it scales correctly. But just when it was about to finish, it suddenly pops back to the former size and then snaps to the completed scaled up version.
How do I fix this?
You have it a little bit wrong, you have to set the attributes a little differently:
.elem { -webkit-transition: all .4s ease-in-out; }
.elem:hover { -webkit-transform: scale(1.3); }
You need to set the animation attributes on the element itself, and then the action on the hover :)
Working example (Webkit browsers only).