CSS media query makes browser hang - css

Question

I'm doing a responsive website, but the weirdest is happening, after I added the specific css queries for ipad, the website complete breaks, it never stop loading.
This is the link to the site http://ficm.hacemoscodigo.com/, if you load it with greater width than 1024 everything will be okay, if you resize the window to something lower than 1024 everything will be okay too, but if you first load it with the window somewhere in between 768px and 1024px of width it will cause the error I just described.
This is my CSS query: (it's written in LESS)
/* Desktops and laptops ----------- */
#media only screen and (min-width : 1025px) {
#sidebar_ipad{ display: none; }
}
/* iPads (portrait/vertical) ----------- */
#media only screen and (min-width : 768px) and (max-width : 1024px) {
#container{ width: 768px; }
#sidebar_desk{ display: none; }
#sidebar_ipad{ display: block; width: 768px; float: none;
#logo{ width: 238px; float: left;
img{ width: 100%; }
}
#menu_fijo{ width: 492px; float: left; margin-left: 10px; }
}
}
I'm not sure this is because of CSS cause it blows my mind something CSS related can break a site so hard. (Chrome goes nuts and even wants to kill the page)

Answer 1

The problem is in the JS not in the CSS, as the code get caught in an infinite loop in functions.js, line 853.
From what I can see you are trying to incrementally increase the letter-spacing of an element .ajusta_tracking until it changes height. However, the element is inside #sidebar_desk, when #sidebar_desk is hidden the element's height never changes. Since the code breaks out of the loop only when height changes, it runs forever, looking like it crashed.
The relevant code from functions.js is here (irrelevant parts cut out):
function ajusta_tracking( selector ){
var clase = $(selector);
var altura = clase.height(); // clase.height() is 0, as it is hidden
var nuevaAltura = altura;
while( nuevaAltura === altura ){
interletraje += 0.1;
clase.css( 'letter-spacing', interletraje + 'em' );
// clase.height() is always 0, as it is hidden
// so the following line does not change anything
nuevaAltura = clase.height();
}
}
ajusta_tracking('.ajusta_tracking');
Make sure you do not run ajusta_tracking() on a hidden element or make sure it can finish the loop if you need its code to run even then.