HTML strange mobile behavior

[79wjd]

I finished a website, but there are a couple bugs that I can't quite figure out..... All my testing is being done on an iPhone 6s Plus (since that's only mobile device that I have).

 

Solved by adding onclick=""

1. In both safari and chrome. When I click on a dropdown menu (that activates on hover) it ONLY works on one out of the dozen or so webpages -- but it consistently works. All the webpages have the EXACT same header code, so I'm not exactly sure why it only consistently works on one page (the one page happens to have a google map iFrame in it). Also, on the one page where the dropdown menu works, I'm able to scroll over the links by dragging my finger across them and they highlight as the :hover effect is triggered. On the rest of the site the :hover effect doesn't appear to work as none of the links ever get highlighted. 

 

This was a bug, but it was supposedly fixed, and I know that it is possible to get an iframe to be updated by links in chrome (as another website has the exact functionality I'm trying to get).

2. In chrome ONLY (this isn't an issue in safari). I have an iframe in the page with a google map and below the map are two links (which update the iframe to the respective map). In safari it works fine, but when I click on either of the links in chrome it tries to open up the embedded map in a new page rather than in the iframe. 

 

Appears to be a bug with chrome for iOS 

3. In chrome ONLY. When I scroll down on the page quickly it detaches the navigation bar/header from the top of the page and pushes it down 100px or so, so you can see content above the navigation bar. 

 

 

 

 

 

iOS doesn't support the Required Tag

4. I have a search button which shouldn't allow the user to search without typing something into the search box first. It works fine on desktop, but on mobile it doesn't work (I used the required tag in the search form to accomplish this).

 

 

<form role="search" method="get" action="search.html">        <input type="text" name="zoom_query" placeholder="Search... " required>       <button class="searchButton">Search</button> </form>  

 

[Captain Matt]

The website I developed a few month ago was pretty basic, but load order WAS CRUCIAL to getting things working correctly.

My load order for the drop down menus I did was:

li > li a > visited > hover was the best priority to get my hovering working... Hope this helps!

 

nav.horizontalNAV li {
	display: inline;
	padding: 10px; 
	margin: 20px;
}

nav.horizontalNAV li a {
	display: inline;
	padding: 10px; 
	margin: 20px;
	text-decoration: none;
}


nav.horizontalNAV li a:visited {
	color: #FFFFFF;
	display: inline;
	padding: 10px; 
	margin: 20px;
	
}


nav.horizontalNAV li a:hover {
	color: #00FFFF;	
	padding: 10px; 
	margin: 20px;
	text-decoration: none;
	
}

 

 

[79wjd]

3 minutes ago, Captain Matt said:

The website I developed a few month ago was pretty basic, but load order WAS CRUCIAL to getting things working correctly.

My load order for the drop down menus I did was:

li > li a > visited > hover was the best priority to get my hovering working... Hope this helps!

 

 

 

I don't see anything in my CSS that should cause any problems (and if there was an issue with the css why would it only be a problem in one of the dozen pages which all use the same nav bar -- the only conclusion that I can come to is that the existence of an iframe is somehow allowing the dropdown menu to work properly). 

 

Also, I didn't include a :visited property in my nav bar. 

ul.topnav {
    list-style-type: none;    
    margin: 0 auto;
    padding: 0; 
    background-color: white;
    position: relative; 
    z-index: 2;
}
ul.topnav li {
    float: left;
}
ul.topnav li a, .dropbtn{ 
    color: black; 
    display: block;
    padding: 10px 20px;
    font-size: 18px; 
    text-align: center;
    text-decoration: none;    
}
ul.topnav li a.active, ul.topnav li a:hover, .dropdown:hover .dropbtn {
    border-bottom: 1px solid black;
}
ul.topnav li a.dropdownActive, .dropdown-content a:hover {
    background-color: black;
    color: white;
}
ul.topnav li.dropdown {
    display: inline-block;
}
ul.topnav li.icon {
    display: none;
    position: fixed;
    right: 40px; 
    top: 25px;
}
.dropdown-content {
    display: none; 
    position: fixed; 
    background-color: #337ab7;
    min-width: 160px; 
    box-shadow: 0px 8px 16px 8px rgba(0,0,0,0.2);
}
.dropdown-content a {
    color: black;
    text-decoration: none; 
    display: none;
    text-align: right;
}
.dropdown:hover .dropdown-content{
    display: block;    
    position: fixed;
}

[Captain Matt]

-snip-

 

I don't have your iframe code in front of me... but I would doublecheck with this list.

http://www.w3schools.com/tags/tag_iframe.asp

Try commenting out all the attributes and adding them back in one at a time.

 

That's all I got!

[79wjd]

15 minutes ago, Captain Matt said:

-snip-

 

I don't have your iframe code in front of me... but I would doublecheck with this list.

http://www.w3schools.com/tags/tag_iframe.asp

Try commenting out all the attributes and adding them back in one at a time.

 

That's all I got!

I fixed my menu issue by adding an empty onclick to the <li>.

 

the iframe itself works fine, but if I click a link which is supposed to reload the iframe then it opens in a new tab. It works fine in every desktop browser I've tried -- it's just an issue with iOS where it tries to open the iframe in a new tab. Either there is some bug with Chrome iOS or I need to add something to accommodate Chrome on iOS.