Simple Media query rules change on page refresh
It looks like Chrome has a problem with elements that are floated, positioned and translated at the same time. Again, this is a flaw in Chrome, not in your code.
One way out of this is to use no positioning, only translation to move the circle.
//CSS media queries added to style tag here to prevent scrolling in other code blocksvar style = document.getElementsByTagName('style')[ 0 ];style.innerHTML += ' \ @media( max-width: 550px ) { \ body { \ background-color: #ddd; \ } \ main { \ height: auto; \ text-align: center; \ } \ .circle, .about-container { \ float: none; \ } \ .circle { \ display: inline-block; \ transform: translateY(-40%); /* changed a bit to compensate */ \ } \ .about-container { \ margin: 0 auto; \ text-align: left; \ } \ } \';/* ///////////////// ELEMENTS IN ORDER THEY APPEAR IN HTML ///////////////// */body { transition: 0.25s;}main { max-width: 600px; margin: 0 auto; height: 11rem; padding-top: 10px; font-size: 0.8rem; text-align: left;}.circle { height: 100px; width: 100px; background-color: #444; border-radius: 50%; float: left;}/* this was moved here */.vertically-center { transform: translateY(40%);}.about-container { width: 75%; float: right;}body button { display: block; margin: 0 auto; padding: 8px;}<head> <style> /* ///////////// BASIC STYLES TO MAKE THIS SNIPPET LOOK BETTER ///////////// */ @import url('https://necolas.github.io/normalize.css/latest/normalize.css'); * { box-sizing: border-box; } .clearfix:after { content: ""; display: block; clear: both; } /* moved the .vertically-center bit to before the media query */ </style></head><body> <main class="clearfix"> <div class="circle vertically-center"></div> <div class="about-container"> <h3>About</h3> <p> This problem is pretty wierd. When you <strong>make this snippet full screen</strong> and try shrinking the browser width to less than <strong>550px</strong> <em>( You will know you're at 550px because the background will darken )</em> the layout changes - Which is expected. However when you expand the window beyond 550px again and click <strong>Reload Frame</strong> the current layout unexpectedly updates itself. <br><br>What's going on? </p> </div> </main> <button onclick="location.reload()">Reload Frame</button></body>But as others have shown, there are more solutions. Take your pick!
Solution : The simple solution is to add margin-top:11% to div.vertically-center then the circle comes back to it's original state after resizing the window back..! :D
And fixing a CSS issue has lots of ways to be fixed it can even be fixed with just adding some html elements along with css code or just by changing the current css and without adding any elements.So it's up to you which one to follow then.
BETTER WAY TO USE IT :Since I checked that the margin-top:11% messes up with Firefox style so you can use following two ways to just apply it to Chrome only as :
1) Chrome JavaScript Solution :
if (navigator.appVersion.indexOf("Chrome/") != -1) {document.getElementById("vertically-center").style.marginTop = "11%";}2) Chrome CSS Solution :
/* Chrome 29+ */@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) { .vertically-center { margin-top:11%; }}/* Chrome 22-28 */@media screen and(-webkit-min-device-pixel-ratio:0) { .selector {-chrome-:only(; property:value; );} }
update code try this run code
<div class="circlemain"> <div class="circle vertically-center"></div></div> .circlemain { top: 50%; position: relative; }@media( max-width: 550px ) { .vertically-center { position: relative; transform: translateY( 0% ) !important; top: 50%; }//CSS media queries added to style tag here to prevent scrolling in other code blocks var style = document.getElementsByTagName('style')[ 0 ]; style.innerHTML += ' \ @media( max-width: 550px ) { \ body { \ background-color: #ddd; \ } \ main { \ height: auto; \ text-align: center; \ } \ .circle, .about-container { \ float: none; \ } \ .circle { \ display: inline-block; \ transform: translateY( 0 ); \ } \ .about-container { \ margin: 0 auto; \ text-align: left; \ } \ } \ @media( min-width: 551px ) { \ .circle { \ transform: translateY( 0 ); \ } \ } \ ';/* ///////////////// ELEMENTS IN ORDER THEY APPEAR IN HTML ///////////////// */ main { max-width: 600px; margin: 0 auto; height: 11rem; padding-top: 10px; font-size: 0.8rem; text-align: left; }.circlemain { top: 50%; position: relative;} .circle { height: 100px; width: 100px; background-color: #444; border-radius: 50%; float: left; top: calc( 50% - 10px ); } .about-container { width: 75%; float: right; } body button { display: block; margin: 0 auto; padding: 8px; } @media( max-width: 550px ) { .vertically-center { position: relative; transform: translateY( 0% ) !important; top: 50%; } }<head> <style> /* ///////////// BASIC STYLES TO MAKE THIS SNIPPET LOOK BETTER ///////////// */ @import url('https://necolas.github.io/normalize.css/latest/normalize.css'); * { box-sizing: border-box; } .clearfix:after { content: ""; display: block; clear: both; } .vertically-center { position: relative; top: 50%; transform: translateY( -50% ); } </style> </head> <body> <main class="clearfix"> <div class="circlemain"> <div class="circle vertically-center"></div></div> <div class="about-container"> <h3>About</h3> <p> This problem is pretty wierd. When you <strong>make this snippet full screen</strong> and try shrinking the browser width to less than <strong>550px</strong> <em>( You will know you're at 550px because the background will darken )</em> the layout changes - Which is expected. However when you expand the window beyond 550px again and click <strong>Reload Frame</strong> the current layout unexpectedly updates itself. <br><br>What's going on? </p> </div> </main> <button onclick="location.reload()">Reload Frame</button> </body>