CSS tabs look bad when zooming browser window

Question

I have a CSS "tab bar" with a bottom border. The active tab should have a "hole" in the bottom border. I've implemented this by a negative bottom margin and a bottom border the same colour as the background.

This looks fine at normal browser zoom:

But looks bad in various ways in Chrome and Safari if I zoom the browser window:

How do I make it not look bad when zooming? Ideally without introducing additional markup. I would like for it to work at least in all modern browsers.

Here's the code (JSFiddle: https://jsfiddle.net/4utwsvt2/):

HTML:


  
    Foo
    Bar

CSS:

body {  background: #fff; }

.tabs {
  border-bottom: 1px solid #000;
}

.tab {
  display: inline-block;
  border: 1px solid #000;
  margin: 0 5px -1px;
  padding: 5px;
}

.tab.active {
  border-bottom-color: #fff;
}

I've tried decimal pixel values as suggested here with no luck (JSFiddle: https://jsfiddle.net/1gyz7me5/1/).

I've tried using position: relative instead of a negative margin, with no luck (looks good in Chrome but not Safari – JSFiddle: https://jsfiddle.net/qwkvxdj4/).

I've tried using translate instead of a negative margin, with no luck (JSFiddle: https://jsfiddle.net/qwkvxdj4/1/).

CSS tabs look bad when zooming browser window

1 Answers