Mobile-incompatibility with CSS

Something to do with this code is making my website not work on mobile. I have a div in the first line of the body in order to set a rotating set of backgrounds when loaded and when clicked, which are blurred, and then the real image upfront in the span. I wish I knew what was wrong with the code. But, if I can't find a solution, is there any way to disable a certain range of my CSS code on mobile platforms?

div {
  height:100%;
  width:100%;
  background-size:cover;
  -webkit-filter: blur(50px);
  -moz-filter: blur(50px);
  -o-filter: blur(50px);
  -ms-filter: blur(50px);
  filter: blur(50px);
  position: absolute;
  left:0;
  top: 0;
}

span {
  z-index:9999;
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  -ms-filter: blur(0x);
  filter: blur(0px);
}