html - Bootstrap Navheader Safari Weird Layout on First Load -

I'm looking at a strange layout in Safari via a bootstrap nav header. It only appears on page load for the first time Refreshing the page gives the correct layout (opening and pasting a fresh window in the URL incorrectly repeatedly gets incorrectly.)

Here is a picture of the current layout Is:

And when I have never visited the page Again, this layout is:

Place the link section on the same line as a brand Should not

Nav class = "navbar navbar-default navbar-fixed-top" & gt; & Lt; Div class = "container-liquid" & gt; & Lt; Div class = "navbar-header" & gt; & Lt; Button class = "navbar-toggle" data-target = "# collapser" data-toggle = "fall" type = "button" & gt; & Lt; Span class = "sr-only" & gt; Toggle Navigation & lt; / Span & gt; & Lt; Span class = "icon-bar" & gt; & Lt; / Span & gt; & Lt; Span class = "icon-bar" & gt; & Lt; / Span & gt; & Lt; Span class = "icon-bar" & gt; & Lt; / Span & gt; & Lt; / Button & gt; & Lt; A class = "navbar-brand" href = "/" id = "brand" & gt; & Lt; Img src = "http://upload.wikimedia.org/wikipedia/commons/f/f1/Android_sample.svg" style = "height: 40px" & gt; & Lt; / A & gt; & Lt; Ul class = "navbar-nav pull-left" id = "path" & gt; & Lt; Li & gt; & Lt; A href = "link" & gt; A link & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; Div id = "collapser" class = "Nawabar-fall collapse" & gt; & Lt; One class = "navbar-right btn btn-default" id = "navbar-login" & gt; Login & lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Neo & gt; & Lt; / Header & gt;

and styling:

  # brand {line-height: 50px; Padding: 0 1.2rem; Padding-right: 0; Width: 120px; } # Path {list-style: none; Margin: 0; Padding-top: 16px; Padding-left: 0; } # Path li {float: left; } # Path li: first {content: "/"; Padding: 0 0.6rem; }  

Any ideas on working around this weird behavior?

It looks like a safari bug.

I resolved it with:

• Absolute state of real people
• Add 120px logo) The hyphen was left for #path

, this nabber collapse was complicated by section, which Will change to #path when the demolished logo is the easiest solution #path to another .navbar-brand category, # path -nav was wrapped in. Finally, Firefox path-nav does not need to use float: any .

The revised work example here is:

  & lt; Header & gt; & Lt; Nav class = "navbar navbar-default navbar-fixed-top" & gt; & Lt; Div class = "container-liquid" & gt; & Lt; Div class = "navbar-header" & gt; & Lt; Button class = "navbar-toggle" data-target = "# collapser" data-toggle = "fall" type = "button" & gt; & Lt; Span class = "sr-only" & gt; Toggle Navigation & lt; / Span & gt; & Lt; Span class = "icon-bar" & gt; & Lt; / Span & gt; & Lt; Span class = "icon-bar" & gt; & Lt; / Span & gt; & Lt; Span class = "icon-bar" & gt; & Lt; / Span & gt; & Lt; / Button & gt; & Lt; A class = "navbar-brand" href = "/" id = "brand" & gt; & Lt; Img src = "http://upload.wikimedia.org/wikipedia/commons/f/f1/Android_sample.svg" style = "height: 40px" & gt; & Lt; / A & gt; & Lt; Div id = "path-nav" class = "navbar-brand" & gt; & Lt; U id = "path" & gt; & Lt; Li & gt; & Lt; A href = "link" & gt; A link & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "collapser" class = "Nawabar-fall collapse" & gt; & Lt; One class = "navbar-right btn btn-default" id = "navbar-login" & gt; Login & lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Neo & gt; & Lt; / Header & gt;  

.

  # brand {line-height: 50px; Padding: 0 1.2rem; Padding-right: 0; Width: 120px; Status: Completed; } # Path {list-style: none; Margin: 0; Margin-left: 120px; Padding-top: 4px; Padding-left: 0; } # Path li {float: left; } # Path li: first {content: "/"; Padding: 0 0.6rem; } / * Firefox * / # path-nav (float: none;}