Prevent blurred border on transition transform scale

Question

I'm working on a navbar animation. On click on the navbar button the red round div get a scale transition to cover all the page. The problem is the bad blurred effect I have on the border while it's scaling up. I've try to use backface-visibility: hidden and translateZ(0) to fix it but it seem not solve the problem. To show you better what I mean I set the transition time to 5s. I'm using chrome.

$(".navbar_button").click( function(){
  if ($(this).hasClass("clicked")){
    $(this).removeClass("clicked");
    $("#bar1,#bar2,#bar2b,#bar3,.round_nav,.round_nav2").removeClass("open");
 

    
  }
  
  else {
    $(this).addClass("clicked");
    $("#bar1,#bar2,#bar2b,#bar3,.round_nav,.round_nav2").addClass("open");
  
    
  }
});

@import url('https://fonts.googleapis.com/css?family=Crimson+Text');

body{
  margin:0px;
  overflow: hidden;
}

.container{
  height:100vh;
  width:100%;
  background-color:#EEE9E9;
  overflow: hidden;
}

.navbar_button{
  width:30px;
  height:25px;
  position:absolute;
  top: 40px;
  right: 40px;
}

.bar{
  position:absolute;
  width:100%;
  height:3px;
  -webkit-border-radius: 12px; 
  -moz-border-radius: 12px; 
  border-radius: 12px; 
  background-color:white;
  cursor: pointer;
  display: block;
  margin: 0;
   -webkit-transition: .5s;
  transition: .5s;
}

#bar1{
  top:0%;
  left:0%;
}

#bar1.open{
  -webkit-transform: scaleX(0);
  -webkit-transition: .5s;
  transition: .5s;
}

#bar2{
  top:calc(50% - 4px);
  -webkit-transform: rotate(0deg);
  -webkit-transition: .5s;
  transition: .5s;
}

#bar2.open{
  -webkit-transform: rotate(45deg);
  -webkit-transition:  .5s;
  transition: .5s;
}

#bar2b{
  top:calc(50% - 4px);
  -webkit-transform: rotate(0deg);
  -webkit-transition: .5s;
  transition: .5s;
}

#bar2b.open{
  -webkit-transform: rotate(-45deg);
  -webkit-transition: .5s;
  transition: .5s;
}

#bar3{
  top:calc(100% - 8px);
  right:0%;
}

#bar3.open{
  -webkit-transform: scaleX(0);
  -webkit-transition: .5s;
  transition: .5s;
}

.round_nav{
  width:50px;
  height:50px;
  background-color: #FF4040;
  position:fixed;
  top:0px;
  right:0px;
  margin-top:25px;
  margin-right:30px;
  -webkit-border-radius: 50%; 
  -moz-border-radius: 50%; 
  border-radius: 50%; 
  -webkit-transition:  .5s;
  transition: .5s;
  overflow: hidden;
  
}

.round_nav.open{
  transform: scale(60);
  -webkit-transition: 5s;
  transition: 5s;
  
}



.navbar_button:hover .round_nav{
  transform: translateZ(0);
  -webkit-transform: scale(1.1);
  
  
}

.round_nav2.open{
  width:5000px;
  height:5000px;
  opacity:0;
  margin-top:-2500px;
  margin-right:-2500px;
  -webkit-transition: all 1s ease;
  transition: all 2s ease;
  transition-delay:.1s;
  -webkit-transition-delay:.1s;
}

.nav_content{
  position:absolute;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  padding-left:20px;
  margin:0px;
  width:120px;
  height: 200px;
  -webkit-transition: .2s;
  transition: .2s;
  
}

.nav_content li{
  color: #EEE9E9;
  font-size: 30px;
  font-family: 'Crimson Text';
  margin-bottom: 10px;
  letter-spacing: 2px;
  cursor: pointer;
  text-align: center;
  -webkit-transition: .3s;
  transition: .3s ;
}

.nav_content ul{
  list-style-type:none;
  margin-left:10px !important;
  margin-top:0px;
  margin-bottom:0px;
  padding:0px;
  position:absolute;
  left:2%;
  top:0px;
  -webkit-transition: .6s;
  transition: .6s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="round_nav2">
      
  </div>
  
  <div class="round_nav">
      
  </div>
  
  <div class="navbar_button">
    <span id="bar1" class="bar"></span>
    <span id="bar2" class="bar"></span>
    <span id="bar2b" class="bar"></span>
    <span id="bar3" class="bar"></span>
  </div>
</div>

Not sure but wouldn't you still need the vendor prefix on that? e.g.: `-webkit-backface-visibility: hidden;` — Geert-Jan, Apr 16 '17 at 11:25
http://stackoverflow.com/a/7021188/2872279 <- what about this? — NBTX, Apr 16 '17 at 12:27

Asons · Accepted Answer · 2017-04-16T20:43:24.590

2

The problem here is that you scale a 50px wide element 60 times, hence getting jugged edges.

Do it the other way around, where you set its default size to 3000px and scaled to 0.0167, and then on click, scale it to 1.

Since your CSS is a little messy I just show the 2 main rules, though you might need to adjust a few more properties.

.round_nav{
  width:3000px;
  height:3000px;
  transform: scale(0.0167);
  transform-origin: right top;
  ...
}

.round_nav.open{
  transform: scale(1);
  ...
}

edited Apr 16 '17 at 20:43

answered Apr 16 '17 at 18:57

Asons

84,923
12
110
165

Thanks, it works. I've just adjusted the margin to join the right circle position. I've Just edit your answer changing transform: scale(0) to transform: scale(1) – vlk Apr 16 '17 at 20:08

Prevent blurred border on transition transform scale

1 Answers1