Please note that most of the following issues have been resolved.
Also some have more info as how to avoid them.
1. Webkit browsers
Webkit browers have a problem especially when resizing window due to over-optimization.
They sometimes don't properly redraw layout or apply CSS property changes
and the workaround is to force redrawing or recalculating properties
for example by hiding and re-showing an element.
This also may not work every time.
Webkit browsers have a fixed CSS z-index issue.
According to:
http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements
Chrome has decided to choose a different approach than what's mentioned in standard specs.
So now with Firefox and IE,
a tooltip, popover or dropdown menu inside content area goes above fixed sidebar,
but below .hover submenus or when sidebar is minimized.
But in Chrome, popovers, tooltips etc go below fixed sidebar.
On the other hand when sidebar is fixed in Firefox,
text becomes fuzzy,
and if we apply -moz-backface-visiblity:hidden it gets better
which again manipulates stacking context (z-index).
As a result, now fixed sidebar will be above all elements of content area, so
you should take care to show dropdowns, popovers or tooltips in a direction which
don't go below fixed sidebar.
There is an example of changing tooltip direction in Tooltip section
The only cross-browser workaround to this is to detach a submenu from sidebar on mouse hover,
append it to body and then put it back in its place on mouseleave.
Old Safari versions have a flickering issue when sidebar has scrollbars and there is an animated icon in content area.
This may not be an issue with updated versions, but Safari for Windows has not been updated for a long time which again is a rarely used browser in Windows.
2. Chrome
Chrome has a problem with responding to click events on Ace buttons becauseo of "move down" effect.
I have tried to fix this and its seems to be working now.
But if the problem persists you can remove button.btn:active CSS rule
inside assets/css/less/buttons.less
or assets/css/ace.css
Most of the above webkit issues apply to Chrome as well.
3. Android Default Browser & Chrome
Android's default browser has an issues with top:auto when
sidebar or breadcrumbs is fixed
When sidebar is fixed, document is in RTL mode and there are animated icons inside navbar,
Android default browser will misplace sidebar.
So you can avoid this by removing animated icons in RTL mode.
Android's default browser doesn't trigger window resize properly when address bar is hidden.
It's not a big deal
Chrome Browser on Android, doesn't respond to "mouse hover" events the way
Android's Default Browser or Android Firefox do.
4. iOS Safari
iOS default browser has a problem when you click on sidebar items
that are hidden at first and are shown when user scrolls down to view them
The link receives click event and all handlers are triggered.
It just doesn't navigate to the url.
So I used document.location = link_element.attr('href')
to navigate to new url and it works.
But if you are using custom handlers for a link and want to avoid navigation,
just add data-link="false" attribute to the link to disable navigation:
Also when navbar is fixed and an input element receives focus,
fixed navbar won't be redrawn.
Currently I have added a workaround which forces redraw of navbar.
5. RTL
When using settings box to switch RTL & LTR mode several times,
some browsers may not redraw elements properly.
It's not an issue and when you make RTL-specific changes in your server side response,
browser will render pages correctly.
Also when sidebar is fixed and there are animated icons inside navbar,
Android default browser will misplace sidebar.
So you can avoid this by removing animated icons in RTL mode.