when flyToBounds method zooming polygon polygonal edges freezing

I'am using flytobounds method for loading polygon with animation. But there is a little problem here.

As you can see on gif and jsfiddle samples when zooming polygon, polygon edges freezing until access optimum zoom level.

How can i solve this animation problem? Or are there any alternative methods to replace "flytobounds" method.

İf gif sample is not clear.

You can check this mistake on jsfiddle. I believe jsfiddle sample clear then gif. https://jsfiddle.net/esjtfL0y/1/

    var circle = L.circle([51.508, -0.11], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    weight: 2,
    radius: 500
}).addTo(map);

setTimeout(function(){
map.flyToBounds(circle.getBounds(), { 'duration': 7.5 })
}, 1000);

You can listen on the move event and then fire viewreset on the map to "reload" the layers.

const reRenderFunction = ()=>{
  map.fire('viewreset');
};

setTimeout(function(){
  map.flyToBounds(circle.getBounds(), { 'duration': 7.5 })
  
  map.on('move',reRenderFunction)

  // remove the reload listener after 7.5 seconds
  setTimeout(()=>{
    map.off('move',reRenderFunction);
  },7500);
}, 1000);