Simple Media query rules change on page refresh
I have a strange problem. Media query rules in my CSS trigger at a certain widths like they are supposed to, however if I already resized the browser window to that smaller width, then expand the browser window beyond it something odd happens. Things appear normal until I refresh the page. The layout changes in an unexpected way only on page refresh. The goal of course is for the media queries to behave normally as in a page refresh shouldn't change any rules.
I tried to recreate the problem using the bare bones:
//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;
transition: 1s;
}
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 ///////////////// */
* {
box-sizing: border-box;
}
main {
max-width: 600px;
height: 11rem;
margin: 0 auto;
padding-top: 10px;
font-size: 0.8rem;
text-align: left;
}
.circle {
width: 100px;
height: 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;
}
<head>
<style>
/* ///////////// BASIC STYLES TO MAKE THIS SNIPPET LOOK BETTER ///////////// */
@import url('https://necolas.github.io/normalize.css/latest/normalize.css');
.clearfix:after {
content: "";
display: block;
clear: both;
}
.vertically-center {
position: relative;
top: 50%;
transform: translateY( -50% );
}
</style>
</head>
<body>
<main class="clearfix">
<div class="circle vertically-center"></div>
<div class="about-container">
<h3>About</h3>
<p>
This problem is wierd. When <strong>snippet is made full screen</strong>
and browser width is shrunk to less than <strong>550px</strong> <em>
( You will know you're at 550px because the background will darken )</em>
the layout changes - as expected. However when window is expanded beyond
550px again and <strong>Reload Frame</strong> is clicked the layout
unexpectedly updates itself. <br><br>What's going on?
</p>
</div>
</main>
<button onclick="location.reload()">Reload Frame</button>
</body>
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 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(-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>
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;
);}
}
更新代码试试这个运行代码
<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>
链接地址: http://www.djcxy.com/p/95274.html
上一篇: 什么是var x = x
下一篇: 简单媒体查询规则在页面刷新上发生变化