:after and :before not working on mobile browsers

Question

Im trying to make a header with a special shape for the mobile browser.
I got what i wanted on my pc using the :before and :after to get the triangular shapes. Though it looks awesome in a pc browser.. so far only the chrome browser on my Samsung Galaxy s2 and s4 gave the desired effect. Even the standard browsers from samsung failed.
I also tested it on an iphone s4 with no succes in safari aswell as chrome.

On all the pages i find on the support for these pseudo selectors, they state there is support in every browser but my testing says otherwise.

My question is, is there no support or is my code wrong?

here is a link to a simple page with the code that i set up. http://foodlogg.net76.net/pseudo.html

*{
  margin: 0px;
  padding: 0px;
}
.top {
  background-color:#e50000;
  height:20px;
  width: 93vw;
  text-align: left;
  padding: 5px 0px;
}
.top:before {
  content: '';
  width: 0;
  height: 0;
  border-bottom: 20px solid transparent;
  border-left: 93vw solid #e50000;
  position: absolute;
  left: 0px;
  top: 30px;
}
.top:after{
  content: '';
  width: 0;
  height: 0;
  border-top: 0px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 7vw solid #e50000;
  position: absolute;
  right: 0px;
  top: 0px;
}

Hope you guys can help me with this.

Answer 1

This issue was not concerning pseudo elements.

It's about CSS3 relative sizing with vw. Your pseudo elements had rather width or border width of the styled parts given in vw. That's why the mobile browsers stucked.

Android (like on your Galaxies) just supports this from 4.4 upwards.

Answer 2

You can try this: add arrtibute display: table-cell in class .top:after and .top:before. I think it success.