Page MenuHomePhabricator

FOUC: dablink rendered too narrow
Closed, ResolvedPublic1 Story Points

Description

This is an inverse FOUC. The initial render is correct, but is then corrupted a second later by additional styles.

To reproduce, view https://ja.m.wikipedia.org/wiki/%E6%97%A5%E6%9C%AC on desktop or tablet, as example.

I've narrowed it down to the following CSS ruleset affecting the main <td> element that contains the text:

th, td {
    max-width: 30em;
}
<div id="bodyContent" class="content"><div id="mw-content-text" lang="ja" dir="ltr" class="mw-content-ltr">
  <div class="mf-section-0" id="mf-section-0">
    <div class="dablink noprint">
      <table style="width:100%; background:transparent;"><tbody><tr>
        <td style="width:25px;"><a href="/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:Disambig_gray.svg" class="image view-border-box" title="曖昧さ回避"><img alt="曖昧さ回避" src="//upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Disambig_gray.svg/25px-Disambig_gray.svg.png" width="25" height="19" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Disambig_gray.svg/38px-Disambig_gray.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Disambig_gray.svg/50px-Disambig_gray.svg.png 2x" data-file-width="220" data-file-height="168"></a></td>
        <td>その他の用法については「<a href="/wiki/%E6%97%A5%E6%9C%AC_(%E6%9B%96%E6%98%A7%E3%81%95%E5%9B%9E%E9%81%BF)" class="mw-disambig" title="日本 (曖昧さ回避)">日本 (曖昧さ回避)</a>」、「<a href="/wiki/%E6%97%A5%E6%9C%AC%E5%9B%BD_(%E6%9B%96%E6%98%A7%E3%81%95%E5%9B%9E%E9%81%BF)" class="mw-disambig" title="日本国 (曖昧さ回避)">日本国 (曖昧さ回避)</a>」をご覧ください。</td></tr></tbody>
      </table></div>

</div></div></div>

See also: