CSS messing up on iPad browsers - ios

Question

I have some scss that I'm trying to use for an app. It works fine on my laptop's Firefox/Chrome/Safari browsers but blanks the page on an iPad's Safari/Chrome. I think it's related to the transform properties? Here's my code:
ol {
counter-reset: li; /* Initiate a counter */
list-style: none; /* Remove default numbering */
*list-style: decimal; /* Keep using default numbering for IE6/7 */
font-size: 15px;
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
ol {
margin: 0 0 0 2em; /* Add some left margin for inner lists */
}
}
.rounded-list{
a{
position: relative;
display: block;
padding: .7em .7em .7em 2em;
*padding: .4em;
margin: .5em 0;
background: $light-gray-1;
color: #444;
text-decoration: none;
border-radius: .3em;
/*transition: all .2s ease-out; Uncomment here to add fade-in/out effect*/
&:hover {
background: $light-gray-2;
}
&:hover:before {
transform: scaleX(-1);
-webkit-transform: scaleX(-1); /* Chrome, Safari, Opera */
-ms-transform: scaleX(-1); /* IE 9 */
}
&:before {
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.3em;
top: 50%;
margin-top: -1em;
background: #87ceeb;
height: 2em;
width: 2em;
line-height: 1.4em;
border: .3em solid #fff;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}
}
}
And the html looks like this:
<ol class="rounded-list">
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
</ol>
Any ideas as to why this would blank out an iPad's browser??