Resize with media queries not working in webkit?

I am using the following code for media queries in my CSS:

@media all {html { font-size: 62.5%; }  }/* 62.5%: 1em = 10px */
@media all  and (max-width: 1200px) {   html,body { font-size: 50%; }   }
@media all  and (max-width: 1000px) {   html,body { font-size: 45%; }   }
@media all  and (max-width: 800px) {    html,body { font-size: 40%; }   }

      

        
        
        
      

    

but while font size> 62.5% resizes correctly with webkit, sizes <62.5% resizes text but not width, height, padding, etc. element.

eg:

.loader {
    width:38rem;
    height:36rem;
    position:relative;
}

      

        
        
        
      

    

will only increase the text in it, not the width and height of the element.

This issue only occurs in webkit browsers, not Firefox:

after a lot of research i couldnt find a solution to this problem, any idea? You can find a live demo here: http://partytube.eu01.aws.af.cm/