CSS tabs look bad when zooming the browser window
I have a CSS tab bar with a bottom border. The active tab should have a "hole" at the bottom. I implemented this with a negative bottom margin and the bottom border the same color as the background.
This looks fine with normal browser zoom:
But in Chrome and Safari it looks bad if I enlarge the browser window:
How do I make it look bad when scaled up? Ideally without introducing additional markup. I would like it to work in at least all modern browsers.
Here's the code (JSFiddle: https://jsfiddle.net/4utwsvt2/ ):
HTML:
<body>
<div class="tabs">
<div class="tab active">Foo</div>
<div class="tab">Bar</div>
</div>
</body>
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: <a4> ).
I tried using position: relative
negative margins instead, with no luck (looks good in Chrome, but not Safari). JSFiddle: https://jsfiddle.net/qwkvxdj4/ ).
I tried using translate
negative margin instead, with no luck (JSFiddle: https://jsfiddle.net/qwkvxdj4/1/ ).
source to share
I found a solution for Chrome zoom levels except 75% and 33% and 20%:
body { background: #fff; }
.tabs {
border-bottom: 1px solid #000;
}
.tab {
display: inline-block;
position: relative;
top: 1px;
border: 1px solid #000;
margin: 0 5px;
padding: 5px;
}
.tab.active {
border-bottom-color: #fff;
}
The problem is "hiding" the bottom border with the bottom border of the tab so that it appears active. At certain zoom levels, the aesthetic will partially cover (if at all) the bottom border. By removing the negative margin and making the position relative, you move the tabs after the page is rendered, which is a decent pseudo-fix for scaling at least.
source to share