Weird glitch when scale and blur an image in chrome - html

I'm experimenting a "zoom and blur" css effect. So when I hover over an image, it's supposed to blur out and scale a bit, while contained in a div with overflow:hidden.
However, when running in Chrome, there's always a weird glitch. A blurry white border shows up around the container while the transition is going.
I'm wondering if there's a better way of doing it? Or a method of circumventing it? Thanks a lot!
You can see a gif demonstrating the problem: http://imgur.com/SrK5rXq
And the same code running in firefox as a comparison: http://imgur.com/942LBKV
Note the borders within the image.
And below is my code:
<style>
#img0{
width:500px;
height:auto;
}
.hoverBlur{
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
}
.hoverBlur:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
transform:scale(1.1);
-webkit-filter:blur(15px);
-moz-filter:blur(15px);
filter:blur(15px);
}
.container{
margin:200px;
width:500px;
height:333px;
border:1px solid #ccc;
overflow:hidden;
}
</style>
<div class="container">
<img id="img0" src="test.jpg" class="hoverBlur"/>
</div>

This is a REALLY old thread but I ran into this issue and couldn't find the solution published anywhere else so I'm posting it here:
You can fix this by adding a margin to the image that is the same size as the blur size (in this case 15px) then transform: translating the image back into place.
https://jsfiddle.net/zeojxtvb/
So in our example, a blur(15px) is applied to the image. So also apply the following to the image:
img {
...
margin: 15px;
transform: translate(-15px, -15px);
}

Related

Transform scale() Safari bug when used on elements with border

CSS transform scale() function appears to have a bug on Safari when it's used on elements with a border.
I'm trying to zoom an image on mouse over using transform: scale() function but if the image has a border then it gets pixelated when scaled.
Here is a sample of the same element with the same CSS rules applied (except the border):
Code example: https://jsfiddle.net/m6g4kw30/
div {
text-align: center;
}
img {
height: 100px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
border: 1px solid #000;
margin: 20px;
}
img.noborder {
border: none;
}
img:hover {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(5);
-moz-transform: scale(5);
-ms-transform: scale(5);
-o-transform: translateZ(0) scale(5);
transform: translateZ(0) scale(5);
}
<div>
<img src="https://via.placeholder.com/1000.png" alt="">
<img src="https://via.placeholder.com/1000.png" class="noborder" alt="">
</div>
CSS transform scale() function appears to have a bug on Safari when it's used on elements with a border.
You can say that again! Unfortunately, the reported bug(s) for this (and similar) issues go back many years, with the following bug referenced in most:
https://bugs.webkit.org/show_bug.cgi?id=27684 (Opened in 07/2009)
If you didn't catch the date, it's a 10 year old bug that's still causing developers issues today! YIKES.
Basically, the issue comes down to Safari rasterizing the layer. On transform/scale, it resizes the layer, however it does not re-render the rasterized layer. In your use-case, the rasterized image is scaled up, but the text/image is blurry.
As for a workaround/fix? There are a couple ways you can "address" this:
1) Force a re-render
A quick/easy fix is to force Safari to re-render your layer when you transform. One way this can be achieved is by applying a CSS property which you then change after transforming (some people have success changing a background-color, for example). For your specific use case, I had luck with the following combination:
img {
outline: 1px solid #000;
border: none;
}
img:hover {
outline: none;
border: 1px solid #000;
}
By toggling those specific values, I was able to force Safari to re-render the rasterized layer, thus rendering a sharp image (similar to the non-border example). Here's a JSFiddle with the full code example: https://jsfiddle.net/gc56brfh/
2) Scale down, then up
Another workaround, documented here, is to set the element's initial size to the "scaled up" dimensions, and then scale down the element until you're ready to scale it up. That way, the element is rasterized to the correct dimensions.
CSS wise, that may look like:
img {
-webkit-transform: translateZ(0) scale(0.2);
height: 250px;
}
img:hover {
-webkit-transform: translateZ(0) scale(1);
}
In the above, we've set the initial size of the img to 250px (this is based on your original css, with images being 50px and then scaled up 5). We then scale down the image by 0.2, resulting in 50px. On hover, we then scale back up to 250px by setting scale(1).
Here's an updated JSFiddle: https://jsfiddle.net/df2zqgnx/
One thing to note is that other CSS properties might need to be updated with this workaround. For example, you'll notice in the fiddle I also needed to update the border from 1px to 5px to compensate for the scaling down.
Anyway, hope this was helpful and one of the solutions works for you!

Jerky CSS3 transition in Firefox

I am trying to do a simple image fade on rollover - works fine and smooth in Chrome, but Firefox is a bit jumpy. I've tried doing the backface-visibility trick on the container, but still no luck.
Anyone have any ideas?
JSFiddle
HTML
<div class="link-box large">
<div class="image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRStwH3maKRqLU8lLOo1XbO6uZIKHRyf2PGv66H6ol5mB0kS_0r" alt="">
</div>
</div>
CSS
.link-box .image img { transition: all .2s ease-out; width:200px; }
.link-box.large { position: relative;}
.link-box.large:hover .image img { opacity: .65; }
My best guess is that setting the width of the image to 200px and leaving the height unspecified is causing the browser to calculate the height of the image. If the height calculates to a nice whole number it isn't an issue. If the height calculates to a decimal it may be the cause of the problem.
In this case the natural dimensions of the image are 275px by 183px.
By changing the width of the image to 200px you are shrinking the image to 72.727272...% of its natural size.
275/200 = 0.727272... Or if you prefer fractions: 275(8/11) = 200
Now running the same equation on the height yields:
183(8/11) = 133.090909...
It looks like, under the normal run of things, the partial pixels are cropped, but during the transition the partial pixels aren't being cropped, and the image is warped slightly to show the partial pixels within the same height.
Cropped down to 133px:
Not cropped and slightly warped:
Now that we have a good hypothesis on what's causing the problem, on to the solutions:
You can hard code the height of the image:
Working Example
.link-box .image img {
transition: all .2s ease-out;
width:200px;
height: 133px; /* manually set the height */
}
Or if you would rather not hard code the height, you can also fix the issue with an anti-alias hack, just add a box-shadow.
Working Example
.link-box.large:hover .image img {
opacity: .65;
box-shadow: 0 0 0 #000; /* add a non-visible box-shadow */
}
Or if you're concerned about the cross-browser compatibility of using a box-shadow, you can also use a transparent border:
Working Example
.link-box .image img {
transition: all .2s ease-out;
width:200px;
border: 1px solid transparent; /* add transparent border */
}
Works good on my Firefox.
Anyway you can try to add some special attributes that will prepare the browser for the transition and actually render the element with possible transformation in mind.
Such an attribute is transform: translate3d(0,0,0);
Like this :
.link-box .image img {
transition: all .2s ease-out;
width:200px;
transform: translate3d(0,0,0);
}
.link-box.large { position: relative;}
.link-box.large:hover .image img { opacity: .65; }

How to correct Hover css effect tremble/shaking?

I made an hover effect in my website that references an image that is the original image in 65% of opacity. The problem is, and this only happens one time, only the first time i hover it everything shakes/tremble a bit, but then everything starts working just fine. Perhaps something missing in my hover code? Can you see what's wrong?
Thanks for the help :)
The css code I'm using:
#rebface
{
content:url("http://static.tumblr.com/g1c47pc/Td2n783c4/nface.png");
position:relative;
left:8%;
margin-left:20px;
display:block;
box-sizing: border-box;
}
#rebface:hover {
content:url("http://static.tumblr.com/g1c47pc/alcn783j0/nface_65.png");
transition: 0.5s linear;
position:relative;
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
The HTML:
<div style="margin-top:20px; display:flex;">
<a target="_blank" href="http://www.facebook.com/sharer.php?u={Permalink}"><div id="rebface"></div></a>
</div>
You can see it here: (This website only works in chrome/safari for now)
http://testedesignfranjas.tumblr.com/post/87336302788/blend-food-culture-magazine-concepcao-de
You are swapping the images in the CSS content attribute. I'm quite sure these arent cached on page load so they are loaded when hovering what causes a short flickering.
You can simply avoid that by using opacity instead of another image.
.facebook
{
content:url("http://static.tumblr.com/g1c47pc/jhDn7hp40/sitef_1.png");
left:50px;
z-index:2;
position:absolute;
top:110px;
left:0px;
z-index:50;
}
.facebook:hover {
opacity: 0.6;
-webkit-backface-visibility: hidden;
}
And as a side note -- use background instead of adding a background image via the content attribute. It works for older browsers and is much more of a best practice.
In your css you have the following:
#rebtweet:hover{ some-styles }
#rebface:hover{ some-styles }
#rebtumb:hover{ some-styles }
#rebgplus:hover{ some-styles }
Each of these has one common style: transition: 0.5s linear;
Try removing this style. I'm not sure, but it may solve your flickering issue.
Hope this helps.

Wobbly Image while upscaling

I am applying 2 CSS3 transitions to a image. Everything works fine. Only issue. The image wobbles while upscaling. Is there any way to smoothen this out?
DEMO
CSS
div{
width:199px;
height:253;
margin-left:50px;
margin-top:50px;
}
div:hover
{ -webkit-transform: scale(1.2);
-webkit-filter: hue-rotate(180deg);
-webkit-transition:all 2s linear;
}
EDIT: Somehow I notice that the issue is not with the upscale property. If you remove the hue-roate property the images upscales without any jitter. However I need both the effects in my animation.
I placed the transition on the img and transitioned the width instead of scale and it seemed to fix the wobble
FIDDLE
div{
margin-left:50px;
margin-top:50px;
}
img
{
width:199px;
}
img:hover
{ width: 238px;
-webkit-filter: hue-rotate(180deg);
-webkit-transition:all 2s linear;
}
The problem is that the image is being scaled up along different axes at different times because it is not a square image and the floating-point dimensions are being truncated to integers.
The only fix that exists is to artificially make the image element square so that the two dimensions of the image are scaled up in sync, which will eliminate the perceived jitter.
Though, if I could get away with it, I probably just reduce the transition time so that the jitter is not as noticeable.

Keep Transition effect after removing the cursor

I need to change the background-color from red to transparent.
This change should occur when I hover over a div.
The reason is why I need it transparent is so I can show an absolute positioned div under the main div, in other words, when I hover over the parent div, I need to show the child div.
When I move away the cursor from this div, I don't want a reverse-transition, I want the background to stay transparent, I want the blue div to always be there after I move away the cursor.
Since I need a PURE CSS solution (No JS/JQuery), I came into the CSS3 Transition.
<div id="parent">
<div id="child">
</div>
</div>
This is a fiddle (Firefox).
#parent
{
background:red;
-moz-transition:background 1s;
}
#parent:hover
{
background:transparent;
}
I thought about doing this with animation, since I can fake this by giving it a temporary duration to stay transparent, for example.
0% {background:red;}
1% {background:transparent;}
100% {background:transparent;}
But then animation will stop when I move the cursor away.
Note: This may sound ridiculous or stupid, but my intention is bigger than this, this is just one small example.
Take a look at the transition-delay property.
#parent { transition-delay:999999s; }
#parent:hover { transition-delay:0s; }
Fiddle
This way, the hover animation will happen instantly (0s) while the transition to the initial state will only happen after 277 hours without leaving the page. You can increase the value a bit further if necessary, though I believe this value is enough for a real world page. =]
I don't think it's possible with pure CSS. As a compromise you can use JavaScript to add a class to the element and then handle all visuals with CSS.
http://jsfiddle.net/ZvcgP/1/
HTML
<div class="effect">Hover me</div>
CSS
.effect {
background-color: red;
-webkit-transition:background 1s;
transition:background 1s;
}
.effect.anim-done {
background-color: transparent;
}
JS
$('.effect').mouseenter(function () {
$(this).addClass('anim-done');
});
use below code to transiton from red to transparent. and please change 'object' to the class of your object
.object {
background-color: red;
-webkit-transition:background-color 1s linear; /* for webkit supported browsers */
-moz-transition:background-color 1s linear; /* for old mozilla browsers */
-o-transition:background-color 1s linear; /* for opera browsers */
transition:background-color 1s linear; /* for css3 supported browsers */
}
.object:hover {
background-color: transparent;
}