Div not hiding because of -web-kit effects

I am trying to hide some specific DIVS when the page is not viewed on a standalone Safari browser on an iPad via

$(function(){

            var mainNav = $( "#mainNav" );
            var body = $( document.body );

            if (
                ("standalone" in window.navigator) &&
                !window.navigator.standalone
                ){

                mainNav.hide();
            } 
});

and it works with every DIV except with a particular DIV that will not disappear, no matter what.

This DIV, let's call it "Buttons" I can see it briefly before it hides. The peculiarity of this DIV is that it has a background color, and when there is Text inside it, the background color appears briefly. If there is an image inside it or if开发者_JAVA技巧 there is no background color, then the DIV disappears completely as it should. But if I have background color AND text then it shows for a brief moment.

Any ideas why this is?

Haven't stumbled upon this problem before, but from what you're saying you could do an ugly work around (if you need it fixed asap).

You say that the DIV doesn't have a background color it disappears right away. Couldn't you just add the background-color and text after it's been hidden? Yes, it's very ugly, but it could work for now as a quick-fix :)

You could also try using some server-side scripting (if possible) to check the browser before the page renders.

Guess that's my best suggestions, sorry for not giving you an awesome solution =/