CSS Android Issue

[pwntastic]

Hello, I'm having a problem with a popup I'm making.  This problem is only in the android default browser however it works well in any other browser.  

 

With JavaScript, I found out that when I click anywhere within the popup, it doesn't tell me I'm in #popup, it tells me that I am in the #popup_wrapper

 

I imagine it's something witht he size because when i zoom out it works well.  

What would cause this issue?

 

Thanks in advance.

 

My code is actually inline and not like here.  I just put it out like this because I thought it would be easier to read.  

<style type="text/css">
    #popup_wrapper{
        overflow: hidden;z-index: 100;width: 100%;height: 100%;background-color: #c0c0c0;background: rgba(0, 0, 0, 0.5);position: fixed;top: 0px;left: 0px;font-family: 'Karla', Arial, Sans-Serif;color: #5a5353;
    }
    #hor_wrapper{
        width: 100%;height: 450px;position: relative;top: 15%; z-index: 101;
    }
    #popup{
        height: 450px;width: 450px;margin: 0 auto;background-color: #fff;border-radius: 7px;box-shadow: 3px 3px 5px #000; z-index: 110;
    }
    #popup_header{
        width: 400px;height: 150px;margin: 0 auto;
    }
    img{
        width: 250px;height: 100px;position: relative;left: 75px;margin: 15px auto;
    }
    h1{
        text-align: center; font-size: 25px; margin-bottom: 0px;
    }
    p{
        width: 350px;height: 40px;margin: 15px auto;line-height: 20px;font-size: 16px;
    }
    #opt1{
     line-height: 100px;border: 2px dashed #fcc4ab;outline: #fcc4ab solid 2px;text-align: center;color: #fff;height: 100px;width: 150px;background-color: #fcc4ab;float: left;margin: 40px 20px;text-transform: uppercase; cursor: pointer;   
    }
    #opt2{
        line-height: 100px;border: 2px dashed #aca9a9;outline: #aca9a9 solid 2px;text-align: center;color: #fff;height: 100px;width: 150px;background-color: #aca9a9;float: right;margin: 40px 20px;text-transform: uppercase; cursor: pointer;
    }
</style>
 
<div id="popup_wrapper" style="">
    <div id="hor_wrapper" style="">
        <div id="popup" style="">
            <div id="popup_header" style="">
                <img src="image.jpg" alt="image goes here" style="">
                <h1 style="">
                    Lorem ipsum!
                </h1>
                <p style="">                    
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. 
                </p>
                <div id="opt1" style="">
                    Option 1
                </div>
                <div id="opt2" style="">
                    Option 2
                </div>
 
            </div>
 
        </div>
 
    </div>
 
</div>

Edited August 17, 2013 by pwntastic

[Irate]

If I'm not mistaken, Android browsers handles click events with propagating up to a higher hierachy.

 

Add, within the click function, the line event.stopPropagation();, which will prevent any event from bubbling up to a higher hierachy element.

 

So, for example, $('#popup').click(function(e){ e.stopPropagation(); /* rest of your code here */});

[pwntastic]

Yep that was what was happening lol thanks for your help.