[BUG]: Values of overlayed non-fixed columns are visible in active_cell when using horizontal scrollbar and fixed_columns

[FabianHi]

Description

In a table with a horizontal scrollbar and the first three columns fixed, it seems that the non-fixed columns slide under the part of the table with fixed columns. It is possible to see the values of the non-fixed columns in the currently active cell while scrolling through the table, as shown in the GIF.

Expected Behavior

The content of the non-fixed columns should not be visible in the active cell of a fixed column when scrolling the table.

import dash
import dash_html_components as html
import dash_table
import pandas as pd

df = pd.DataFrame(
    {
        'column_0': [1, 21], 
        'column_1': [2, 22], 
        'column_2': [3, 23], 
        'column_3': [4, 24], 
        'column_4': [5, 25], 
        'column_5': [6, 26], 
        'column_6': [7, 27], 
        'column_7': [8, 28], 
        'column_8': [9, 29], 
        'column_9': [10, 30], 
        'column_10': [11, 31], 
        'column_11': [12, 32], 
        'column_12': [13, 33], 
        'column_13': [14, 34], 
        'column_14': [15, 35], 
        'column_15': [16, 36], 
        'column_16': [17, 37], 
        'column_17': [18, 38], 
        'column_18': [19, 39], 
        'column_19': [20, 40]
    }
)

columns = [
    {'name': ['Header 0'], 'id': 'column_0', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Header 1'], 'id': 'column_1', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Header 2'], 'id': 'column_2', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Header 3'], 'id': 'column_3', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Header 4'], 'id': 'column_4', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Header 5'], 'id': 'column_5', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Header 6'], 'id': 'column_6', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Header 7'], 'id': 'column_7', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Header 8'], 'id': 'column_8', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Header 9'], 'id': 'column_9', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Header 10'], 'id': 'column_10', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Header 11'], 'id': 'column_11', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Header 12'], 'id': 'column_12', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Header 13'], 'id': 'column_13', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Header 14'], 'id': 'column_14', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Header 15'], 'id': 'column_15', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Header 16'], 'id': 'column_16', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Header 17'], 'id': 'column_17', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Header 18'], 'id': 'column_18', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Header 19'], 'id': 'column_19', 'type': 'numeric', 'selectable': True}
]

app = dash.Dash(__name__)

demo_table = dash_table.DataTable(
    id='demo_table',
    columns=columns,
    data=df.to_dict('records'),
    fixed_columns={'headers':True, 'data':3},
    style_table={
        'overflowX': 'scroll',
        'minWidth': '100%'
    },
    style_cell={
        'minWidth': '150px', 'width': '150px', 'maxWidth': '150px'
    }
)  

app.layout = html.Div([
    html.Div("Demonstration Table:"),
    demo_table
])

if __name__ == '__main__':
    app.run_server(debug=True, host='0.0.0.0', port=8001)

Context

OS: macOS Big Sur 11.4
Browser: Firefox 90.0.2 (64-bit)

dash 1.21.0
dash-bootstrap-components 0.10.7
dash-core-components 1.17.1
dash-extensions 0.0.51
dash-html-components 1.1.4
dash-renderer 1.9.1
dash-table 4.12.0