How to disable black outline in Chrome

user_1709524 0
Viewed 53

This issue is present only in Chrome, the map canvas displays a black outline when clicked (on focus). This is supposedly some kind of accessibility feature turned on by default since Chrome 83. I tried disabling this with css overrides but no success:

  *:focus, *:focus-visible, *:focus-within {
    outline: none !important;
  }

When unfocused:

Unfocused

When focused:

enter image description here

How to remove this, it really ruins the look of my app.

mapbox-gl-js mapbox
1 Answers

This seems to be sufficient for me:

* {
    outline: none;
}

or, to minimise impact on accessibility:

.mapboxgl-canvas {
    outline: none;
}
user_2632680
Related