简体   繁体   中英

links issue on stock android browser

I'am working on mobile version of an existing site and i can't resolve the issue with links in the menu.
The problem occurs only on stock android browser. On Chrome, firefox, safari and even IE the site works fine. All other links on the site are working fine. Here is the link to the site if you would like to test it --> www.antiqpalace.com.

code description: original site had a "main menu" and "left menu" and i moved some elements from "left menu" to "main menu". Then I redesigned the main menu to specification and hide it with display:none. If you click on menu button JS changes display to block.

What I have tried:

  • changing parent div position to absolute. that did not work, there were major scrolling issues.

  • adding JQ .click events to a elements. the result was un-changed. everything still works on chrome... but links remain unclickable in stock android browser.

  • i add css --> a{background-color:blue} to see what happends on phone and links are positiond fine, just un-clickable.
  • I have googled that there was/is issue with links and -webkit-transform but i don't have that line in my CSS.

HTML:

<div> ---> whit a fix position and display none
   <ul class="menu" style="height: 644px;">
        <li class="first leaf menu-mlid-808">
            <a href="/about-antiq-palace-hotel-ljubljana.html" >Antiq Palace Hotel
            </a>
            <img class="DD_right_arrow" src="[some src]">
        </li>

        <li class="expanded active-trail active menu-mlid-817">
            <a href="javascript:show_sub_menu(2)" class="active-trail active">Rooms &amp; Suites
            </a>
            <ul class="menu" style="height: auto; top: 70.84px;">
                <li class="first leaf menu-mlid-823">
                    <a href="/double-bedroom-residential-suite-one-or-two.html" >Double Bedroom Residential Suite for One or Two
                    </a>
                    <img class="DD_right_arrow" src="[some src]">
                </li>
                .....
                </ul>
            <div onclick="show_sub_menu(2)" class="A_DD_submenu">
                <img class="DD_right_arrow" src="[some src]">
            </div>
        </li>
        .....
    </ul>

CSS:

ul{
        margin:0 1.5%;
        padding:0;
        border:none;
        width:97%;
        height:91%;/* js adds inline height of ful win height -51 px example(height:644px;)*/
        display:block;
        float:left;
        overflow-y:scroll;
    }
    ul li,
    ul li.first {
        padding:0;
        margin:0;
        height:auto;
        width:100%;
        background:none;
        background-color:rgba(196,154,69,1);
        display:block;
        float:left;
        border-bottom:dotted 1px rgb(214,184,124);
        position:relative;
        z-index:10000;
    }
    ul li a{
        width:70%;
        display:block;
        font-size:11.5px;
        font-weight:bold;
        padding: 23px 7%;
        text-decoration:none !important;
        float:left;
        text-align: left;
        color: white !important;
        text-transform: uppercase;
        font-family: 'Open Sans', sans-serif !important;
        letter-spacing:2px;
        line-height: 16px;
        z-index: 10000000000;
        position: relative;
    }
    ul li ul{
        width: 100%;
        margin: 0;
        overflow-y: hidden;
        display:none;
    }
    ul li ul li{
        background-color:rgb(126,118,104) !important;
        z-index:1000;
        margin-bottom: 0 !important;
    }

I don't know if it's ok to respond to my own question but I have solved the issue and don't know where to post the solution.

Actual error: Actual error was an issue with position fixed and links inside that . Andriod browser displays links but are un-clickable. Visuali everything looks ok just does not work.

Fix: I changed the position of the element to static and added com css to rewrite old css.

Design issue: This is not a optimal fix because the menu is inserted in the page and not on top of it. I'm not sure which browsers have issues with fixed positioning so I added code to CSS file. If you have a similar problem you can indentify the browser and add code only to that browser

Here is link to css an at the bottom I added the code that fixed this problem. http://www.antiqpalace.com/sites/www.antiqpalace.com/themes/antiqpalace/css/antiq_mobile.css

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM