I have encountered a strange bug in Safari 8 and 9 on desktop, as well as iOS 8.4 and newer on mobile devices. I am perplexed by why it is happening and how to resolve it. This issue can be replicated with 100% accuracy.
Here are the steps to reproduce:
Visit and click on login
Click the three horizontal bars to collapse and expand the menu. Repeat this action to confirm that the menu is hiding/showing properly.
Access the Items module. Once again, click the three horizontal bars to collapse and expand the menu. Repeat this step to confirm proper functionality.
Edit an existing item. Scroll to the bottom and click submit. You will then be redirected back to the items list. Click the three horizontal bars again and you will notice that the text disappears and appears to break.
The only solution seems to be clearing the cache.
Watch this video for a demonstration of the bug:
The only known fix at the moment is to remove all CSS animations and transitions.
UPDATE:
After removing the following code, the issue was resolved...but the reason behind it remains unclear.
assets/css/style.css
.rollover {
width: auto;
height: auto;
position: relative;
background-color: black;
display: inline-block;
text-align: center;
line-height: 30px;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
---REMOVED-- -webkit-transition: all 0.7s ease;
}
.rollover:after {
transform: rotateY(0deg);
/*-webkit-transform: rotateY(-180deg);*/
-webkit-backface-visibility: hidden;
/* Chrome, Safari, Opera */
}