Pie Chart Misalignment Issue when resizing the browser window

A misalignment issue was observed when resizing on a donut pie chart. The centers of the circles are misaligned after resizing the browser window.(multiple times of resizing are needed to reproduce this issue)

The original nest pie chat:(linke to codepen: https://codepen.io/runqi-han/pen/JjNGQZx)

After resizing the browser n times (n>10)

The issue can be removed by removing textinfo='none' property in the pie chat.

Below is the code used to reproduce the graph(with Dash).

import dash
import dash_design_kit as ddk
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px
import plotly.graph_objs as go
import numpy as np  
import random 

app = dash.Dash(__name__)
groups = ["Device Drivers", "Computing Resources", "Peripheral Configuration", "New Devices"]
fig = go.Figure()

holes = [0.2, 0.5, 2/3, 0.75]
domain = [[0.4, 0.6], [0.3, 0.7], [0.2, 0.8], [0.1, 0.9]]
prob = np.random.random(len(groups))
prob = prob/sum(prob)
prob = sorted(prob)
direction = "clockwise"
for i in range(0, len(prob)):
    count = random.randint(250, 500)
    data = [prob[i], 1 - prob[i]]
    soft_type = groups[i]
    trace = go.Pie(
        hole=holes[i],
        domain={"x": domain[i],
                "y": domain[i]},
        values=data,
        direction=direction,
        sort=False,
        hovertext=[int(count*prob[i]), int(count*(1-prob[i]))],
        hoverinfo="label+percent",
        labels=[f"Owned {str.capitalize(soft_type)} ({int(count*prob[i])})",
                f"Other {str.capitalize(soft_type)} ({int(count*(1-prob[i]))})",
                ],
        textinfo='none',
        #textfont_color='white',
        textposition='outside',
        marker={'line': {'color': 'white', 'width': 5}},
        showlegend=True
    )
    direction = "counterclockwise" if direction == "clockwise" else "clockwise"
    fig.add_trace(trace)
fig.update_layout(
    legend=dict(
        orientation="h",
        yanchor="bottom",
        y=-0.45,
        xanchor="left",
        x=0,
        itemclick="toggle"
    ),
    showlegend=True,
)

app.layout = ddk.App([
    ddk.Row(children=[
        ddk.Card(width=100, children=ddk.Graph(figure=fig)),
    ])
])


if __name__ == '__main__':
    app.run_server(debug=True)

Bắt đầu với bản tái hiện Dash được cung cấp và CodePen được liên kết, sau đó liên tục thay đổi kích thước trình duyệt với các trace pie lồng nhau bằng cách sử dụng textinfo='none'. So sánh tâm của các hình tròn trước và sau khi thay đổi kích thước, đồng thời xác minh rằng các tâm vẫn thẳng hàng trong khi vẫn giữ nguyên hành vi biểu đồ đã được báo cáo.