Random white cells when using markdown or linear-gradient()

Dash Python
1

I’m working in a black template with Dash, and when I’m using markdown in any cell, some random cells’ background (without markdown) becomes white.

image
image1233×283 25.7 KB

Just fix when I reload the page, but if I change to the “asset details” tab and back again the problem happens again.

image
image1232×385 29.3 KB

I’m also using linear-gradient() css function, in the Normal Warning Critical column, my dashtable:

dash_table.DataTable(
        id='trucks-table',
        columns=[{"name": i, "id": i, 'presentation' : ('markdown' if i =='Equipment' else None) } for i in df_asset_table.columns],
        data=df_asset_table.to_dict('records'),
        row_selectable='single',
        persistence=True,
        hidden_columns=[lgm.translate('data')],
        cell_selectable=False,
        selected_rows=[0],
        style_as_list_view=True,
        filter_action='native',
        css=[
            {
                'selector': '.show-hide',
                'rule': 'display: none'
            },
        ],
        style_table={
            'maxHeight':'60rem',
            'overflowY':'auto',
        },
        style_data_conditional=[
            {
                'if': {
                    'column_id': 'Normal'
                },
                'background': (
                """
                    linear-gradient(90deg,
                    black 33%,
                    transparent 33% 66%,
                    black 66%),
                    linear-gradient(0deg,
                    black 10%,
                    var(--green) 10% 90%,
                    black 90%)
                """)
            },
            {
                'if': {
                    'column_id': 'Warning'
                },
                'background': (
                """
                    linear-gradient(90deg,
                    black 33%,
                    transparent 33% 66%,
                    black 66%),
                    linear-gradient(0deg,
                    black 10%,
                    var(--yellow) 10% 90%,
                    black 90%)
                """)
            },
            {
                'if': {
                    'column_id': 'Critical'
                },
                'background': (
                """
                    linear-gradient(90deg,
                    black 33%,
                    transparent 33% 66%,
                    black 66%),
                    linear-gradient(0deg,
                    black 10%,
                    var(--red) 10% 90%,
                    black 90%)
                """)
            },
            {
                'if': {
                    'column_id': 'abstent'
                },
                'background': (
                """
                    linear-gradient(90deg,
                    black 33%,
                    transparent 33% 66%,
                    black 66%),
                    linear-gradient(0deg,
                    black 10%,
                    var(--gray) 10% 90%,
                    black 90%)
                """)
            },
        ],
        style_data={
            'border':'1px dashed {}'.format(sent_color.dark_gray),
            'textAlign': 'center',
        },
        style_header={
            'fontWeight': 'bold',
            'fontSize' : '15px',
            'borderTop' : 'none',
            'textAlign': 'center',
        },
        style_cell={
            'backgroundColor': 'black',
            'cursor' : 'default'
        },
    )

The creation of my markdown seems normal:

for i in range(len(df)):
        values.append('''![](/assets/{}) {}'''.format('red_truck.png' if df_table['critico'][i] > 0 else 'yellow_truck.png' if df_table['alerta'][i] > 0 else 'green_truck.png' if df_table['normal'][i] > 0 else 'gray_truck.png', df_table['equipamento'][i]))

has anyone noticed this? It looks like a bug.

Env’s versions:

python=3.8.
dash==1.17.0
dash-bootstrap-components==0.10.7
dash-core-components==1.13.0
dash-daq==0.5.0
dash-html-components==1.1.1
dash-renderer==1.8.3
dash-table==4.11.0
plotly==4.12.0
Flask==1.1.2
Flask-Compress==1.8.0

running in a development environment with Flask.
Chrome
Windows 10