html - chrome layout only correct after window resize -

-

i'm having strange issue chrome initial rendering of page incorrect, done forces redraw (eg. resizing window) layout rendered correctly. maximizing seems cause problems.

codepen example here

initial (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>

update: after more tinkering, seems fail when css height specified.

i think it's weird bug of chrome. can offer use vh instead of % in padding property. hope it'll give similar result.

also removed ".photo-inset" block , set borders directly image.

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>


Comments

Post a Comment

Popular posts from this blog

How has firefox/gecko HTML+CSS rendering changed in version 38? -

-
i have a little website header no longer renders correctly, since updating firefox 38.0.5 [the faceplant logo missing top right, , main logo no longer centred]. still renders expected in other browsers. how has engine's rendering changed in update? according mdn , list of changes is: css support ruby-position , ruby-align have been added , available default ( bug 1055676 , bug 1123917 , bug 1039006 ). the :unresolved pseudo-class has been implemented custom elements ( bug 1111633 ). the predefined style ethiopic-numeric uses space, instead of dot, suffix match recent change spec ( bug 1120721 ). css transitions on generated content (with ::before , ::after ) on both inline , block splits them start expected specification ( bug 1110277 ). the implementation of css logical properties made big progress. [...] how css transitions start has been modified match recent change of specifications, aiming @ having interoperable behavio
Read more

javascript - Complex json ng-repeat -

-
i try ng-repeat on object, tried several times still stuck. if have idea, , if it's possible share tips kind of situation. [ { "abonnement": { "id": "1", "nom": "bas prix", "tarif": "2.49", "communication": "2h de communication", "vers": "vers fixes et mobiles", "zone": "zone nationale" } }, { "abonnement": { "id": "2", "nom": "national", "tarif": "9.99", "communication": "t\u00e9l\u00e9phonie et sms illimit\u00e9s", "vers": "vers fixes et mobiles", "zone": "zone nationale" } }, { "abonnement": { "id": "3", "nom": "euro", "tarif&
Read more

jquery - Cloning of rows and columns from the old table into the new with colSpan and rowSpan -

-
i using clone jquery. necessary clone gray area in new table. problem cloned rows , columns can has rowspan , colspan. the gray area intersection data-fix-cols , data-fix-rows. my solution not work: <table id="old-table" data-fix-cols='3' data-fix-rows='4'> <tbody> <tr> <td class="gray">clone me</td> <td colspan="2" rowspan="2" class="gray">clone me</td> <td>ashgabat</td> <td>barcelona</td> <td>berlin</td> </tr> <tr> <td rowspan="3" class="gray">clone me</td> <td>bucharest</td> <td>warsaw</td> <td>washington</td> </tr> <tr> <td class="gray">clone me</td>
Read more