Gap between elements at various zoom levels - html

Question

#sidebar {
width: 160px;
z-index: 1000;
background: #ed1b2e;
position: absolute;
top: 57px;
left: 0;
}
#sidebar .inner {
border-bottom: 1px solid #f35765;
padding: 0px 0;
}
#sidebar .list {
padding: 20px 0 15px;
}
#sidebar .list li {
padding: 4px 0;
}
#sidebar .list a {
display: block;
padding: 0 10px 0 20px;
color: #ffffff;
height: 30px;
line-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#sidebar .list a:hover {
color: #ffffff;
color: rgba(255, 255, 255, 0.9);
}
#sidebar .list a.active {
background: #000810;
position: relative;
}
#sidebar .list a.active:hover {
background-color: #000810;
background-color: rgba(0, 8, 16, 0.9);
}
#sidebar .list a.active:after {
content: "";
position: absolute;
pointer-events: none;
display: block;
top: 0;
right: -30px;
height: 0;
width: 0;
border: solid transparent;
border-color: transparent;
border-left-color: #000810;
border-width: 15px;
}
<div id="sidebar" style="min-height: 1586px;">
<div class="sidebar-wrap">
<div class="sidebar-content">
<div class="inner">
<ul id="MAIN_TAB_2000_SUBMENU_TOP" class="list" style="">
<li>
<a id="2020" href="/service/main.do" class="active">Home</a>
</li>
<li>
<a id="2022" href="/service/sales/documents/issues.do">Document issues</a>
</li>
</ul>
</div>
</div>
<!-- //sidebar-content -->
</div>
<!-- //sidebar-wrap -->
</div>
If user in Chrome changes Zoom to for example 90% then Black arrow separates into two pieces. I want black arrow to be always look like when it is on 100%. I want black arrow to be always look like when it is on 100%. Any suggestions? jsfiddle

Answer 1

You can avoid this problem by positioning your arrow using left: 100%; instead of right: -30px;.
Remove right: -30px; from #sidebar .list a.active:after
Add left: 100%; to #sidebar .list a.active:after
My best guess as to why this is happening is that this is probably due to the way the browser is rounding pixel values.
#sidebar {
width: 160px;
z-index: 1000;
background: #ed1b2e;
position: absolute;
top: 57px;
left: 0;
}
#sidebar .inner {
border-bottom: 1px solid #f35765;
padding: 0px 0;
}
#sidebar .inner.inner-top {
padding-top: 40px;
}
#sidebar .inner.no-border {
border-bottom: none;
}
#sidebar .selector-holder {
padding: 25px 18px 28px 18px;
}
#sidebar .selector {
position: relative;
z-index: 1;
}
#sidebar .selector .toggler {
display: block;
outline: 0;
height: 28px;
background: #cc1626;
padding: 0 25px 0 10px;
overflow: hidden;
position: relative;
color: #ffffff;
font-size: 12px;
line-height: 28px;
}
#sidebar .selector .toggler span {
display: block;
white-space: nowrap;
overflow: hidden;
}
#sidebar .selector .toggler:after {
top: 50%;
right: 8px;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
margin-top: -2px;
border: solid transparent;
border-color: rgba(255, 255, 255, 0);
border-top-color: #ffffff;
border-width: 6px;
margin-left: -6px;
}
#sidebar .selector .toggler.hidden:after {
display: none;
}
#sidebar .selector ul {
padding: 3px 0;
}
#sidebar .selector ul li {
padding: 2px 0;
}
#sidebar .selector ul a {
display: block;
padding: 5px 10px;
white-space: nowrap;
color: #ffffff;
outline: 0;
font-size: 12px;
}
#sidebar .selector ul a:hover,
#sidebar .selector ul a.active {
background: #9c9c9c;
}
#sidebar .js-dropdown-content {
min-width: 100%;
background: #808080;
}
#sidebar .list {
padding: 20px 0 15px;
}
#sidebar .list li {
padding: 4px 0;
}
#sidebar .list a {
display: block;
padding: 0 10px 0 20px;
color: #ffffff;
height: 30px;
line-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#sidebar .list a:hover {
color: #ffffff;
color: rgba(255, 255, 255, 0.9);
}
#sidebar .list a.active {
background: #000810;
position: relative;
}
#sidebar .list a.active:hover {
background-color: #000810;
background-color: rgba(0, 8, 16, 0.9);
}
#sidebar .list a.active:after {
content: "";
position: absolute;
pointer-events: none;
display: block;
top: 0;
left: 100%;
height: 0;
width: 0;
border: solid transparent;
border-color: transparent;
border-left-color: #000810;
border-width: 15px;
}
<div id="sidebar" style="min-height: 1586px;">
<div class="sidebar-wrap">
<div class="sidebar-content">
<div class="inner">
<ul id="MAIN_TAB_2000_SUBMENU_TOP" class="list" style="">
<li>
<a id="2020" href="/service/main.do" class="active">Home</a>
</li>
<li>
<a id="2022" href="/service/sales/documents/issues.do">Document issues</a>
</li>
</ul>
</div>
</div>
<!-- //sidebar-content -->
</div>
<!-- //sidebar-wrap -->
</div>

Answer 2

Why do you want to see you page in 90% zoom. try to code your web page in 100%.
it is obvious when you zoom your page the pixel will distort.