Hello there!
I have a bootstrap 3 sidebar that seems to be causing some issues in IE 11. Specifically, I am encountering a strange ghosting effect on the border of the sidebar. When the page initially loads, only the bottom edge of the sidebar is visible. However, as I hover over the collapsible items, a ghosting effect appears on the right edge and persists until the page is refreshed. You can see an image of the issue here.
Keep in mind that the colors used are just for highlighting purposes to show the ghosting edges.
Below is the CSS associated with the sidebar (please note that the "panel sidebar" div section is repeated three times for each of the main collapsible menus but has been omitted here for brevity):
<div class="row-offcanvas row-offcanvas-left active">
<div class="sidebar-offcanvas" id="sidebar" style="overflow-y:hidden; background-color:fuchsia;">
<div class="col-md-12 left-menu">
<div class="panel affix" id="accordion">
<div class="panel sidebar">
<div class="panel-heading unselectable" unselectable="on">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<table class="sidebarTable">
<tr>
<td>
<a href="#">Orders</a> <span class="label label-success">$ 320</span>
</td>
</tr>
<tr>
<td>
<a href="#">Invoices</a>
</td>
</tr>
<tr>
<td>
<a href="#">Shipments</a>
</td>
</tr>
<tr>
<td>
<a href="#">Tex</a>
</td>
</tr>
</table>
</div>
</div>
I would really appreciate any assistance since I've already tried various combinations such as setting borders to none or outline to none.