I implemented a CSS3 transform of an image where I scale and translate it. When I hover over the image to transform the resulting image will sometimes flash or not appear. I have to move the mouse around a bit to get it to stick. Is it a problem with my code or the implementation in Firefox 3.6?
html:
<a class="image-transform" href="#" title="William and Catherine"><img src="images/William_Walter_and_Catherine_Rowe.jpg" alt="William Walter and Catherine Rowe"/></a>
css:
.image-transform img
{
float:right;
width: 75px;
background-color: #ffffff;
margin: 1em 1em 1em 1em;
padding: 3px;
border: solid 1px;
-moz-box-shadow: 5px 5px 5px #888;
-o-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.image-transform:hover img
{
/* width: 300px;*/
-moz-transform: scale(4) translate(-60px);
-webkit-transform: scale(4) translate(-60px);
-o-transform: scale(4) translate(-60px);
transform: scale(4) translate(-60px);
}
This production page is at: http://www.amcolan.info/Rowe/rowe.php. It's the only small photo on the right margin. I've used a javascript solution on another page that works well, but I thought I'd give CSS3 a try.
Thanks for any help.
The reason is really very simple. Have a look at this image:
See, when you hover over the element, the :hover selector takes effect, and it expands and translates, thus moving away from your mouse. Now that the element is not under your mouse, the :hover selector won't take effect, and the element shifts back into the original position, under your mouse. The cycle then repeats.
Now, CSS transitions are not supported in Firefox 3.6, so this happens instantaneously, or as fast as the browser can repaint the screen, so it appears to 'flicker' or 'flash'.
The solution is to make sure that the element is always under the mouse during all parts of the animation, or alternatively, use JavaScript, from where you can use events and queues to gain more fine grained control over the animation.
Related
How do I remove this ugly border created by a background totally overlapped by a inset shadow? Well, that was the idea anyway.
circle {
display:block;
text-decoration:none;
border-radius:50%;
width:100px;
height: 100px;
background: black;
text-align:center;
transition: all 0.8s ease-out;
box-shadow:inset 0px 0px 0px 50px #ffd300;
font-size: 0;
z-index: -1;
border: 10px solid #ffd300;
}
.circle:hover {
box-shadow:inset 0px 0px 0px 0px #ffd300;
transition: all 0.2s ease-out;
}
Code snippet over at Codepen
There is no solution to the actual rendering. (See below the solution for the explanation).
On the contrary, I've played and found a fix for you, which might do the exact thing, by placing an :after pseudo element to mimic the animation exactly as you want it to be.
Click on the "Run code snippet" button below to see if this is exactly what you want.
.circle {
display:block;
text-decoration:none;
border-radius:50%;
width:120px;
height: 120px;
background: #ffd300;
text-align:center;
transition: all 0.8s ease-out;
font-size: 0;
z-index: -1;
}
.circle:before {
display:block;
content:'';
position:absolute;
background:black;
width:0px;
height:0px;
border-radius:50%;
top:68px;
left:68px;
transition: all 0.2s ease-out;
overflow:hidden;
z-index: 0;
}
.circle:hover:before {
width:100px;
height:100px;
top:18px;
left:18px;
font-size: 48px;
}
.circle:after {
display:block;
position:absolute;
font-size: 48px;
line-height: 90px;
color: black;
transition: color 0.2s ease-out;
content: "J";
z-index: 1;
top:18px;
left:58px;
}
.circle:hover:after {
color: white;
transition: color 0.1s ease-out;
}
<a class="circle" href="#">Click</a>
Explanation to the problem
I've pasted two images of how they are rendered in Webkit (Chrome) and Gecko (Firefox). The shadow is getting pixelated along the edges if it is curved. The same phenomena also happens while drawing a curve.
Image 1, ChromeIt is a 500px x 500px of the same code that you used, just to magnify the effect that we are talking about. You can see those weird ugly border in a better view. Now, try reducing border-radius:50%; to a 20%, 10% or 0%, you will slowly see those ugly marks disappearing. As pixels are square themselves, it renders perfectly in case of a rectangular shape / with straight line edges.
Image 2, FirefoxIn the second image, you can see how Firefox renders the same object (500px x 500px), and adds a secondary unknown border along the outside edge of the circle, which is actually the background:black, going out of the 10px border as well (proof: Change the background to #ffd300 and it will disappear).
To conclude, this aliasing phenomenon is a rendering issue currently for both the major browser engines, though its minimized in actual rendering of the circular object itself, but its more prominent in case of shadows or other things which blurs / blends with other colors. It is not a problem with your code though.
The shape has a background color of black, a 10px outside border of yellow, and a 50px inside border of yellow. This seems to be so that when you hover, it will change the inside of the circle to red.
To get rid of the little sliver completely, you could just change .circle's background to #ffd300 (or whatever).
This breaks the animation, however, so you might want to add background:black to .circle:hover.
You can change your CSS to this:
.circle {
display:block;
text-decoration:none;
border-radius:50%;
width:100px;
height: 100px;
background: #ffd300;
text-align:center;
transition: all 0.8s ease-out;
box-shadow:inset 0px 0px 0px 50px #ffd300;
font-size: 0;
z-index: -1;
border: 10px solid #ffd300;
}
.circle:hover {
box-shadow:none;
background: black;
transition: all 0.2s ease-out;
}
Basically, move the back background to hover state and get rid of the box-shadow. Of course you'll have the border on hover, because it goes with your approach, but at least you won't have the border on default state.
Remember that you can use multiple box-shadows by simply separating them with a comma, but either way, no matter how many you add, you will have this border because the border-radius:50% will add it. For reference, try taking the border-radius definition out and you'll see that border disappear.
In short: the only way to get rid of that border at all times, is to use 2 elements: an outer div with background color #ffd300 and an inner div with background color #000 and the J, otherwise you'll have that border, it's just how CSS works
if you add to the CSS a border-width: 0px;. See http://www.w3schools.com/cssref/pr_border-width.asp
I wanted a button to move down a few pixels on hover, but it comes back up again. Shouldn't it stay where it is while you're still hovering on it?
Email Me
.btn {background: #2ecc71; padding: .5em 1em; border-radius: 3px; color:white; font-size: 1.5em; text-shadow:2px 2px 2px #178345; box-shadow: 0px 1px 1px #21a559; transition: transform 0.5s ease 0s;}
.btn:hover {background: #28b865; transform: translate(0px, 3px);}
http://codepen.io/anon/pen/zICBw
The problem is inline element can't be transformed properly. If you set the transform right in normal state, you'll see the transform takes no effect. However it does have a little effect on animation, maybe because while animating, the element's display becomes inline-block (or block in some other cases, at least while being animated, the transform can take effect). After the animation completes, it returns back to inline. So the button's position is set back like as the translate transform has no effect.
Your button is actually an a element, which has inline display by default. You can simply change its display to inline-block or block and it works OK:
.btn {
/* ... */
display:inline-block;
}
Updated demo.
Why not simply transition top? You'll need to position the element, but it will accomplish the same without the reversion.
The problem with transitioning on transform is you change the plane the element occupies, which causes the hover state to no longer trigger. One way around this is to also apply a base transform state to the element.
Demo Fiddle
.btn {
background: #2ecc71;
padding: .5em 1em;
border-radius: 3px;
color:white;
font-size: 1.5em;
text-shadow:2px 2px 2px #178345;
box-shadow: 0 1px 1px #21a559;
transition: top .5s ease;
top:0px;
position:relative;
}
.btn:hover {
background: #28b865;
top:3px;
}
How do I change the color of -webkit-focus-ring-color? Chrome has a light blue that clashes with my CSS, I'd like to change it to another color hex but keep the rest of the style (faded edge, width) the same.
Also, is there an important reason this is a bad idea? Thanks?
The following css should do for Chrome (changing just the colour of the outline):
.thing:focus {
outline-color: [MY_COLOUR];
}
If you want consistent css across browsers, you'd be better off writing your own complete style and probably also including a css reset before that.
If you're happy with the browser focus style and just want to change the colour, the above should do. You might also want to do some quick research to see what the default focus style is for other browsers (maybe some use border?) and set those colours as well.
If you want to emulate the chrome style across all browsers, try this (from the chrome user-agent stylesheet):
.thing:focus {
outline: [My_COLOUR] auto 5px;
}
http://jsfiddle.net/jmysiak/fpqp1zv3/2/
input {
border: 1px solid #c4c4c4;
width: 200px;
height: 20px;
font-size: 16px;
padding: 4px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
transition: all ease-in-out 0.15s;
-webkit-transition: all ease-in-out 0.15s;
-o-transition: all ease-in-out 0.15s;}
input:focus {
outline: none;
border-color: #df9eed;
box-shadow: 0 0 10px #df9eed;}
Yes. You just style it. It's an outline. But you should put something cool looking that still denotes focus so that people who use it, can still see where they are on the page. They might be assisted by other devices besides the standard mouse.
a fiddle
HTML
<button class="thing">Something</button>
or
<input class="thing" type="text" />
CSS
.thing {
border: 1px solid red;
}
.thing:focus {
outline: 0;
border: 1px solid blue;
}
I have a list of icons that are faded out a little and when you hover them its supposed to make the opacity 100% and change the border and the background color. The problem is when I hover it it just completely removes the border but the other things work fine. Here is the CSS:
.homeAppIcon{
border: 1px solid #CCCCCC;
border-radius: 20px;
padding: 5px;
opacity:0.8;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
background:-moz-linear-gradient(center top , #FFFFFF, #EDEDED) repeat scroll 0 0 transparent;
}
.homeAppIcon:hover{
border: 1px solid #000000;
opacity:1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
background:#FFFFFF;
}
When i take the -ms-filter out the border appears correct but it no longermakes the opacity 100%. I am testing this in IE8.
Does anyone have any ideas?
Thanks,
Craig
Trying out some webkit transitions on a site and have come across a problem. The hover state on my links adds a 1px border and decreases the padding so that the positioning stays the same. Works fine normally, but not when I add the transition. Obviously, as I'm only making 1px changes, it happens abruptly, but it doesn't happen at the same time - the padding changes before the border, so the whole thing 'jiggles'.
#loginbuttons a {
text-decoration: none;
padding: 5px;
-webkit-transition: all 0.5s ease;
}
#loginbuttons a:hover {
padding: 4px;
border: 1px solid black;
background-color: yellow;
}
The best way I've found to get around this is to have a white border on the normal state so that it's only changing the color, but I want it to be transparent. Also, is there any way of fading the background color in from white instead of black without setting a white background color? Again, I want it to be transparent, but it just looks weird going gray and then yellow!
I've got transitions on my navigation menu as well, and the same thing happens (this time altering the padding and margin):
#nav ul li a {
color: white;
padding: 10px 10px 8px 10px;
margin: 0 5px;
border: 1px solid black;
opacity: 0.85;
-webkit-transition: all, 0.5s;
}
#nav ul li a:hover, #nav ul li a.selected {
color: black;
padding: 13px 13px 11px 13px;
margin: 0 2px;
text-shadow: 2px 2px 4px white, -2px -2px 4px white, 2px -2px 4px white, -2px 2px 4px white;
opacity: 1;
-webkit-box-shadow: 0px 0px 8px #888;
}
Hmmm, just tried bumping the values up a bit, and even changing the margin and padding by 15px using a linear transition still produces a small (looks like 1 or 2px) glitch. Same thing happens in safari and chrome.
Anyone got any ideas how to make it smooth? Or sort out the color issue? Think it would be better doing it with jquery (ignoring the cross-browser support!)? Might go and see if the same thing happens with opera...
edit: seems like the 10.5a opera release for macs still doesn't support transitions...
First of all, it might be worthy to try border: 1px solid transparent so that the transition changes only the color of the border. In that sense the padding stays the same and there is less browser guesswork. If transparent does not work, any color with an alpha value of 0, for example, rgba(0, 0, 0, 0) is also acceptable.
Opera Presto 2.3 supports transitions, but it asks for different statements — -o-transition-property et al. Hope that this link would be of good use. Firefox does CSS transitions too, and they have a demo page. To make transitions work in Firefox, one must use -moz- statements.