html - ページのサイズが変更されたときにヘッダー要素がリセットされない (Safari で)

Question

このヘッダーは、nav 要素と、インライン画像と単語を含む見出し要素で構成されています。メディアクエリで単語を個別にターゲットにするために、単語をスパンに配置することにしました。ここにヘッダーへのリンクがあります。http://noahenart.com/header/

ブラウザのサイズを変更すると、すべてが計画どおりに機能しますが、サイズを元に戻すと、元の状態には戻りません (ページを更新しない限り)。これは、モバイル デバイスを使用して向きを変えるときに問題になります。

別の見出しに画像を配置するなど、さまざまなことを試しましたが、多くは hgroup で囲まれていましたが、それもうまくいきませんでした。これを修正する方法はありますか？

<header class="top">
<div class="mast">  

    <h1 title="Hawaii Media Grant">
        <a href="#">
            <img id="logoi" src="img/logo_h.png" alt="Hawaii Media Grant logo">
            <span id="logos">HAWAII</span>
            <span id="logob">MEDIA</span>
            <span id="logom">GRANT</span>
        </a>
    </h1>

    <nav>
        <ul>
            <li><a href="#" title="About">About</a></li>
            <li><a href="#" title="Work">Work</a></li>
            <li><a href="#" title="Blog">Blog</a></li>
            <li><a href="#" title="Contact">Contact</a></li>
        </ul>
    </nav>

</div>
</header>

.

header h1 { 
font-size: 1em; 
text-transform: uppercase; 
line-height: 1.1875em; 
font-weight: normal; 
font-style: normal;
float: left; 
margin: 0 0 0 1%; 
position: relative;}

header h1 img { 
float: left; 
position: relative; 
bottom:30px; right: 10px;} 

header h1 a { 
color: #000; 
font-family: "nevisBold","nevis", "Helvetica neue", Arial,sans-serif; 
font-size: 2.2em; 
padding: 0;}

header h1 a span#logos,
header h1 a span#logob,
header h1 a span#logom { 
display: inline;}

a {
background: transparent; 
color: #bababa;
font-size: 100%; 
margin: 0; padding: 0;
text-decoration: none;
vertical-align: baseline; 
-moz-outline: none;}

a:focus, 
a:hover, 
a:active {
outline: 0;}

ul, ol { 
margin-left: 0; 
padding: 0;  
list-style: none;}

header ul {
float: right;
margin: 0;
clear: none;}

header li {
display: inline;
margin: 0 0 0 1.5em;}

header a {
color: #333;
padding: 0 0 5px 0;}

header a:hover {
border-bottom: 6px solid #bababa;
color: #8cc4f5;}

header.top {
background: #fff; 
width: 100%;}

.mast {
margin: 0 auto;   
overflow: auto;
padding: 5em 0 1.25em 0;
width: 71.830985915492958%; max-width: 1020px;} 

@media screen and (max-width: 1195px){
.mast { padding:52px 0 20px 0;}
header h1 { float:none; text-align:center; margin-top:-30px; margin-bottom:; padding-top:; padding-bottom:;}
header h1 img { float:none; bottom:-30px; right: 10px}
header ul { float:none; margin:0.7em auto 1.15em; text-align:center;}}

@media screen and (max-width: 769px) {
header h1 { font-size: 0.8em;}
header h1 a img#logoi { bottom: 0; right: 0; margin: 0 0 0.5em 0; width: 8%;}
header h1 a span#logos { display: block !important; margin: 0 0 0.5em 0;}
header ul { margin: 0.7em auto 0;}
header li { margin: 0 0 0 .5em;}}

@media screen and (max-width: 480px){
header h1 a { padding-bottom: 0; font-size: 2em;}
header h1 a img#logoi {width: 15%;}
header li { margin: 0 0 0 .4em;}}