Sunday, 15 September 2013

Chrome iOS - Loading indicator when applying class with jQuery

Chrome iOS - Loading indicator when applying class with jQuery

For some reason, my page displays the loading indicator on Chrome, when
applying a class to a section with css transition. I think this is causing
the address bar to be 'active', and won't slide up again. And thus
covering my navigation bar. I'm using iPhone 4, iOS5.
I've tried to pin-point what might be causing this, because it's not there
on desktop Chrome, or on Safari on the iphone. The page has a google map,
and I'm collecting data from an XML document using $.ajax. This is however
not causing the problem, cause I've tried disabling everything in the
js-file, except the click handler that applies the class.
Here's the CSS:
#main_bottom {
position: absolute;
bottom: -297px;
width: 300%;
height: 384px;
background-color: #ececec;
-webkit-transition-property: bottom, left;
-webkit-transition-duration: 0.2s;
}
#main_bottom.active {
bottom: 36px;
}
I'm using this to apply the class:
$(document).on('click', '#main_bottom > section:not(#gps) > a', function (e){
e.preventDefault();
$($main_bottom).toggleClass('active');
});
What could be causing this? It seems to be related to the animation
somehow, not sure why. Could it be the absolute positioning, along with
the css transition? If I'm allowed to link to the current live site, I'd
be happy to do that :)

No comments:

Post a Comment