I have an unusual problem with transform skew CSS Property. I have a div with some content and I am skewing the right border.
Everything is working when I test the app on the desktop. However, when I test the app on a device, the CSS is not working.
HTML
<div class="aa">2</div>
CSS
.aa{
float: left;
position: relative;
width: 20px;
padding: 10px 20px;
font-size: 20px;
color: #f0f0f0;
background: #f44336;
}
.aa:after {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: #f44336;
transform-origin: bottom left;
-webkit-transform: skew(-20deg, 0deg);
}