Website appears 180 degrees rotated on iPhone

I have a pretty confusing problem. I have developed a website, which can be accessed on shooja.com . It is using zepto instead of jQuery, and GSAP for animations (Although I don't think these are related to the problem). The code is not compressed so it can be checked completely via web inspector. It appears perfectly on Firefox, Chrome, Safari on desktop and even IE. It is also OK on android browser. But on iPhone ( I have checked it on a 5 and a 5s ), it appears 180 degrees rotated and not scaled down. I can imagine the reason of scaling to be the meta tags, but the rotation doesn't make any sense. Any help is appreciated.

function addEvent(evnt, elem, func) {
   if (elem.addEventListener)  // W3C DOM
      elem.addEventListener(evnt,func,false);
   else if (elem.attachEvent) { // IE DOM
      elem.attachEvent("on"+evnt, func);
   }
   else { // No much to do
      elem[evnt] = func;
   }
}

function onResize() {
      var sc = Math.max(
        1024 / (window.outerWidth - 10),    
        1024 / (window.outerHeight - 50)
      );

      sc = Math.floor(sc/.1)*.1;
      TweenLite.to(dd("qalpaq"), .001, {scale:1/sc, x:-sc*10, y:0, z:0});
}

function init() 
{
    addEvent("resize", window, onResize);

    onResize();
    updateContents();
    TweenLite.to(dd("loading"), .0001, {opacity:0, zIndex:0});
}

Solution

You're problem is your qalpaq element is getting negative transform matrix values. This is the result of this part of the code:

function onResize() {
      var sc = Math.max(
        1024 / (window.outerWidth - 10),    
        1024 / (window.outerHeight - 50)
      );

      sc = Math.floor(sc/.1)*.1;
      TweenLite.to(dd("qalpaq"), .001, {scale:1/sc, x:-sc*10, y:0, z:0});
}

Apparently on mobile Safari, window.outerWidth and window.outerHeight are both 0, making sc the greater value of -102.4 and -20.48, both of which are negative.

Perhaps you want to use window.innerWidth and window.innerHeight, both of which are correct in iOS Safari and are generally more useful.