Css3 Transformation Blurry Borders

Transform Scale makes Div with border-radius Blurry

What transform does is take the existing size and zoom in on it. What you can do is set the &--inner on width and height: 70px (10px times the zoom factor 7 from the transform). Position it in the middle and instead of zooming it 7x on hover, scale it down on the normal view.

I've updated the Fiddle to show you what I mean. https://jsfiddle.net/3arynm5v/3/

As you can see I've edited the outer and inner to to:

  &:hover &--inner {
    transform:translate(0, -50%)scale(1);
    top: 50%;
  }
  &--inner, &--outer {

    position:absolute;
    margin:0 auto; 
    left:0; right:0;
    top:50%;

    border-radius:200%;
  }

  &--inner {
    width:70px;
    height:70px;
    background:white;
    transition:transform 1s;
    transform-origin: center center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
   transform: translate(0, -50%)scale(.1);
  }
  &--outer {
    width:30px;
    height:30px;
    border:5px solid white;
     transform:translateY(-50%);
  }

How can I stop borders blurring when CSS-transform scaling in Chrome?

Just add keyframes for scaling animate:

const scaling = keyframes`
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
`;

Then change the spinner's animate:

animation: ${scaling} 0.5s, ${spin} 1s infinite linear;

Forked CodeSandbox: https://codesandbox.io/s/81pmjjz60

Hope this will help.

CSS transition effect makes image blurry / moves image 1px, in Chrome?

2020 update

• If you have issues with blurry images, be sure to check answers from below as well, especially the image-rendering CSS property.
• For best practice accessibility and SEO wise you could replace the background image with an <img> tag using object-fit CSS property.

---

Original answer

Try this in your CSS:

.your-class-name {
    /* ... */
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
}

What this does is it makes the division to behave "more 2D".

• Backface is drawn as a default to allow flipping things with rotate
  and such. There's no need to that if you only move left, right, up, down, scale or rotate (counter-)clockwise.
• Translate Z-axis to always have a zero value.
• Chrome now handles backface-visibility and transform without the -webkit- prefix. I currently don't know how this affects other browsers rendering (FF, IE), so use the non-prefixed versions with caution.

How to remove white border from blur background image

I have added overflow, padding and even margin, but still the problem not solved. So i tried to give the image tag between div. Problem solved.

<div class="background-image">
<img src="http://www.hdpaperz.com/wallpaper/original/windows-8-wallpapers-2560x1600-2311_1.jpg" width="100%" height="100%"/>
</div>

css

 .background-image {
  background: no-repeat center center fixed; 
  background-size: cover;
  display: block;
  left: -5px;
  top:-5px;
  bottom:-5px;
  position: fixed;
  right: -5px;
  z-index: 1;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  margin:-5px;

 }

js fiddle

http://jsfiddle.net/2pgdttLh/

---

Related Topics