Geek Answers Handbook

Chrome layout only correct after resizing window

I have a strange problem with chrome, where the original page rendering is incorrect, but as soon as something is done, which forces you to redraw (for example, resizing the window), then the layout is displayed correctly. Maximization also seems to cause problems.

here is an example codepen

Original (bad) layout: initial (bad) layout Redrawn (good) layoutRedrawn (good) layout

html,
body {
  margin: 0;
  padding: 0;
}
.photo-frame {
  display: inline-block;
  padding: 1.75%;
  background-color: #111;
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 1);
}
.photo-matte {
  display: inline-block;
  padding: 5% 6%;
  background-color: #fff;
  box-shadow: inset 2px 2px 12px 3px rgba(0, 0, 0, 0.6), inset 0px 0px 1px 1px rgba(0, 0, 0, 1);
}
.photo-inset {
  display: inline-block;
  border: solid 5px #000;
  border-top-color: rgba(170, 170, 170, 1.0);
  border-right-color: rgba(216, 216, 216, 1.0);
  border-bottom-color: rgba(240, 240, 240, 1.0);
  border-left-color: rgba(204, 204, 204, 1.0);
}
img {
  height: 70vh;
  display: block;
}
<html>
<body>
  <div class="photo-frame">
    <div class="photo-matte">
      <div class="photo-inset">
        <img src="http://jlee.me/glow_cube.jpg" />
      </div>
    </div>
  </div>
</body>
</html>
Run codeHide result

UPDATE: after some more intervention, this only seems unsuccessful when CSS height is specified for.

+4
source share
5 answers

, Chrome. vh % . , .

".photo-inset" .

html,
body {
  margin: 0;
  padding: 0;
}
.photo-frame {
  display: inline-block;
  border: 5vh solid #000;
  background-color: #111;
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 1);
}
.photo-matte {
  display: block;
  padding: 5vh 6vh;
  background-color: #fff;
  box-shadow: inset 2px 2px 12px 3px rgba(0, 0, 0, 0.6), inset 0px 0px 1px 1px rgba(0, 0, 0, 1);
}
img {
  height: 70vh;
  display: block;
  border: solid 5px #000;
  border-top-color: rgba(170, 170, 170, 1.0);
  border-right-color: rgba(216, 216, 216, 1.0);
  border-bottom-color: rgba(240, 240, 240, 1.0);
  border-left-color: rgba(204, 204, 204, 1.0);
}
<html>
<body>
  <div class="photo-frame">
    <div class="photo-matte">
      <img src="http://jlee.me/glow_cube.jpg" />
    </div>
  </div>
</body>
</html>
Hide result
+1

, ​​ , :

.photo-matte {
    display: inline-block;
}


.photo-matte {
    display: block;
}
0

display: inline-block; display: inline-block;

box-sizing: border-box; photo-matte photo-frame

html, body {
margin: 0;
padding: 0;
/*background-color: #000;*/
}

.photo-frame {
display: inline-block;
/*padding: 30px;*/
padding: 1.75%;
background-color: #111;
/*background-color: rgb(47, 21, 17);*/

box-shadow: 0px 0px 1px 1px rgba(0,0,0,1);
}
.photo-matte, .photo-frame{
  box-sizing: border-box;
}
.photo-matte {
display: inline-block;
padding: 5% 6%;
/*padding: 50px 60px;*/

background-color: #fff;
box-shadow: inset 2px 2px 12px 3px rgba(0,0,0,0.6), inset 0px 0px 1px 1px rgba(0,0,0,1);
}

.photo-inset {
display: inline-block;
border: solid 5px #000;
border-top-color: rgba(170,170,170,1.0);
border-right-color: rgba(216,216,216,1.0);
border-bottom-color: rgba(240,240,240,1.0);
border-left-color: rgba(204,204,204,1.0);

/*box-shadow: 0px 0px 225px -30px rgba(0,0,0,0.3);*/
}

img {
height: 70vh;
display: block;
}
<div class="photo-frame">
		<div class="photo-matte">
			<div class="photo-inset">
				<img src="http://jlee.me/glow_cube.jpg"/>
			</div>
		</div>
	</div>
Hide result
0

.photo-matte. :

.photo-matte {
   display:inline-block //remove this one
}
0

.photo-matte, :

.photo-matte {
  box-sizing:border-box;
  padding:35px;
  background-color:#fff;
  box-shadow:inset 2px 2px 12px 3px rgba(0,0,0,0.6), inset 0px 0px 1px 1px rgba(0,0,0,1);
  display:inline-block;
}
0

More articles:


All Articles