Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

How to fix blurry Dash Bootstrap Popover and Tooltip in Chrome?

image

This is my code:

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import base64
import pandas as pd
import plotly.express as px

app = dash.Dash(name,external_stylesheets=[dbc.themes.JOURNAL])
app.layout = html.Div(
[
dbc.Button(
“Click to toggle popover”, id=“popover-target”, color=“danger”
),
dbc.Popover(
[
dbc.PopoverHeader(“Popover header”),
dbc.PopoverBody(“And here’s some amazing content. Cool!”),
],
id=“popover”,
is_open=False,
target=“popover-target”,
),
]
)

@app.callback(
Output(“popover”, “is_open”),
[Input(“popover-target”, “n_clicks”)],
[State(“popover”, “is_open”)],
)
def toggle_popover(n, is_open):
if n:
return not is_open
return is_open

if name == ‘main’:
app.run_server(port=3004)

Your example works ok for me in Chrome, but I can recreate the blurriness by zooming in. Try selecting View > Actual size in Chrome and it should reset things if you have inadvertently zoomed.

Interestingly zooming in Firefox doesn’t cause the same problem, I guess there’s a difference in how they render certain fonts?

Thanks for checking it for me. My zoom setting is at 100% and I still have the blur. As you said, the text is clear in Firefox. Things improved in Chrome when I added
style={‘backface-visibility’: ‘hidden’,‘transform’: ‘perspective(1px)’}, but it is not perfect. I can also see the blur when I click on the Popover demo in the Dash Bootstrap Component Website as well.