Google Chrome clears CSS styles for current page when opening link in new tab or opening a new window : <p>This is odd one, I was troubleshooting for 3 days.</p>

<p>Only happening in <code>Chrome Version 53.0.2785.116 m (64-bit)</code> on Windows.</p>

<p>Web server must have header set (meta tag doesn't work in this case):</p>

<p>Apache's .htaccess: <code>Header set Cache-Control "no-cache"</code>
or nginx: <code>add_header Cache-Control no-cache;</code> </p>

<p>You can't recreate it using jsfiddle or built-in code snippet, because css file must be loaded separately using <code>&lt;link href='style.css' rel='stylesheet' type='text/css'&gt;</code>. (but I will include code in snippet anyways).</p>

<p>Steps to recreate:</p>

<ol>
<li>Visit: <a href="http://test.xmpsoft.net/">http://test.xmpsoft.net/</a></li>
<li>Click on link 1 (should reload the page);</li>
<li>Click on link 2 (should bring up new tab with the same page);</li>
<li>Switch to the original tab and repeat same steps;</li>
<li>All CSS styles are gone from the original tab.</li>
<li>If not, repeat same steps again.</li>
</ol>

<p>Please assist to make sure where is nothing wrong with the code before I submit it to Google.</p>

<p>Thanks.</p>

<p>P.S. There is another way or recreating it (that's why I mentioned 'new window' in my Title: Visit same page, reload it, right click -> Inspect (new Development Tools window opens), switch back to the page (repeat if not able to recreate).</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.menu div {
	display: inline-block;
	width: 15em;
	height: 15em;
}

.red {
	background-color: red;
}

.yellow {
	background-color: yellow;
}

.green {
	background-color: green;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv='Content-Type' content='text/html; charset=utf-8'&gt;
&lt;title&gt;Chrome bug&lt;/title&gt;
&lt;link href='style.css' rel='stylesheet' type='text/css'&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class='menu'&gt;
  &lt;div class='red'&gt;Red&lt;/div&gt;
  &lt;div class='yellow'&gt;Yellow&lt;/div&gt;
  &lt;div class='green'&gt;Green&lt;/div&gt;
&lt;/div&gt;
&lt;a href='/'&gt;1. Reload this page&lt;/a&gt;&lt;br&gt;
&lt;a href='/' target='_blank'&gt;2. Open same page in new tab&lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>
