Float right div intermittently pushed out of alignment - angularjs template issue? - html

Question

I have a float right div within a template that loads correctly on initial page load or hard refresh.
However, on state change (using ui-router) then returning (ie swapping templates out), div gets bumped down, by what looks like a div to its left with no float.
Have I applied CSS incorrectly somehow?
Screen shots attached of both scenarios. First image is initial load, second is the page (NG template) returned after leaving via link on page. Link is a template too. The only reason I mention NG is that I've tried to recreate in Plunker with conventional href links, and failed to get the error.
HTML
<div class="locate-change">
<input type="text" color="red" placeholder="ENTER LOCATION" class="input1" />
<a ng-click="locateme()" href="" class="locate2">LOCATE</a>
</div>
CSS
.locate-change {
float:right;
height: 35px;
padding-left: 10px;
width: 300px;
}
.input1 {
display:inline-block;
border: 1px solid red;
background: #000000;
text-transform: uppercase;
font-family:'DINLightRegular', Helvetica, Arial, sans-serif;
font-size: 1em;
margin: 0;
padding: 4px;
outline: none;
width:160px;
}
.locate2 {
float: right;
padding-left:35px;
background: url(../../images/locate.png);
height: 30px;
background-size: cover;
background-size: 30px;
background-repeat:no-repeat;
width:65px;
}
I can recreate the angularjs plunker if necessary.
EDIT a couple of notes:
- this is only happening in Chrome, not in FF or Safari
- the 'Change City' input div uses Angular UI Bootstrap typeahead which seems to add a .dropdown-menu class div - but it has zero dimensions (see screenshot below)
- the empty typeahead dropdown results div code appears and is identical in both correct and incorrect states

Answer 1

I think this is a bug in how Chrome treats the angular-ui bootstrap typeahead directive (based on the fact that we're not seeing this error in either FF or Safari)
The order things are happening seems to be:
- on initial load, the DOM only loads existing html/CSS elements
- once the DOM is loaded, the ng directive then adds the empty typeahead dropdown div, which sits 'below' the locate2 div on the screen despite being written in the DOM between existing divs
ie as the browser reads through the DOM it places:
- input div 1st
- locate2 div 2nd
- invisible dropdown div added last via directive
On returning to the page via ui-router:
- the DOM now includes the additional dropdown element between input and locate2 divs
- each html element is treated in the order it's read in the DOM
- this means that the 'invisible' dropdown div now pushes the locate div out of the way...(in Chrome)
ie as the browser reads through the DOM on returning to the template it places:
- input div 1st
- invisible dropdown div 2nd
- locate2 div 3rd
For whatever reason, Chrome is treating the dropdown not as a hidden div, but as a collapsed visible(?) div and pushing the locate2 div out of place.
On moving the locate2 div to before the change-city div, the injected dropdown code no longer interferes with locate2 div.
In the 'fix', as the browser reads through the DOM it places:
- locate2 div 1st
- input div 2nd
- invisible dropdown div 3rd