WebKitにはクリッピングバグがありますか？

https://stackoverflow.com/questions/4325440

29-09-2019
|

質問

ラインハイトとマージンがある領域を与えられます n, 、そして、この地域には倍数の高さがあります n, 、およびスクロールトップはの倍数によって増加します n Firefox、Opera、Netfrontで予想される結果が得られますが、Chrome（Windows）、Safari（MAC）、および最新のWebKit Nightly（MAC）には漏れがあり、部分的なラインがあります。

私の実際のプロジェクト（共有できません）では、効果は非常に顕著ですが、テストのケースが減ったとしても、前のラインの底がボックスの上部でピークに出ているのを見ることができます。

この効果を避けることは可能ですか？これは、報告すべきWebKitレンダリングエンジンのバグですか？

縮小されたテストケースは、以下で見ることができます私のウェブサイトのライブ例として. 。ドキュメントを数回クリックしてスクロールし、ボックスの上部にあるドット（前の行の文字の下部）ではありません。

<!DOCTYPE HTML> 
<html lang="en"> 
    <head> 
        <meta charset="utf-8"/> 
        <title>scrollTop issue</title> 
        <style> 
        body {
            background-color: white;
            color: black;
        }
        #wrapper {
            width: 300px;
            font-size: 19px;
            font-family: sans-serif;
            line-height: 21px;
            height: 210px; /* A multiple of line height */
            overflow: hidden;
        }

        #wrapper * {
            margin: 0;
            padding: 0;
        }

        #wrapper p {
            margin-bottom: 21px; /* Same as line height */
        }
        </style> 
        <script> 
            window.addEventListener('click', function () {
                document.getElementById('wrapper').scrollTop += 210;    
            });
        </script> 
    </head> 
    <body> 
        <h1>scrollTop issue</h1> 
        <div id="wrapper"> 
            <div id="content"> 
                <p>To Sherlock Holmes she is always <i>the</i> woman. I have seldom heard
him mention her under any other name. In his eyes she eclipses
and predominates the whole of her sex. It was not that he felt
any emotion akin to love for Irene Adler. All emotions, and that
one particularly, were abhorrent to his cold, precise but
admirably balanced mind. He was, I take it, the most perfect
reasoning and observing machine that the world has seen, but as a
lover he would have placed himself in a false position. He never
spoke of the softer passions, save with a gibe and a sneer. They
were admirable things for the observer&#8212;excellent for drawing the
veil from men&#8217;s motives and actions. But for the trained reasoner
to admit such intrusions into his own delicate and finely
adjusted temperament was to introduce a distracting factor which
might throw a doubt upon all his mental results. Grit in a
sensitive instrument, or a crack in one of his own high-power
lenses, would not be more disturbing than a strong emotion in a
nature such as his. And yet there was but one woman to him, and
that woman was the late Irene Adler, of dubious and questionable
memory.
<p> 
I had seen little of Holmes lately. My marriage had drifted us
away from each other. My own complete happiness, and the
home-centred interests which rise up around the man who first
finds himself master of his own establishment, were sufficient to
absorb all my attention, while Holmes, who loathed every form of
society with his whole Bohemian soul, remained in our lodgings in
Baker Street, buried among his old books, and alternating from
week to week between cocaine and ambition, the drowsiness of the
drug, and the fierce energy of his own keen nature. He was still,
as ever, deeply attracted by the study of crime, and occupied his
immense faculties and extraordinary powers of observation in
following out those clues, and clearing up those mysteries which
had been abandoned as hopeless by the official police. From time
to time I heard some vague account of his doings: of his summons
to Odessa in the case of the Trepoff murder, of his clearing up
of the singular tragedy of the Atkinson brothers at Trincomalee,
and finally of the mission which he had accomplished so
delicately and successfully for the reigning family of Holland.
Beyond these signs of his activity, however, which I merely
shared with all the readers of the daily press, I knew little of
my former friend and companion.
<p> 
One night&#8212;it was on the twentieth of March, 1888&#8212;I was
returning from a journey to a patient (for I had now returned to
civil practice), when my way led me through Baker Street. As I
passed the well-remembered door, which must always be associated
in my mind with my wooing, and with the dark incidents of the
Study in Scarlet, I was seized with a keen desire to see Holmes
again, and to know how he was employing his extraordinary powers.
His rooms were brilliantly lit, and, even as I looked up, I saw
his tall, spare figure pass twice in a dark silhouette against
the blind. He was pacing the room swiftly, eagerly, with his head
sunk upon his chest and his hands clasped behind him. To me, who
knew his every mood and habit, his attitude and manner told their
own story. He was at work again. He had risen out of his
drug-created dreams and was hot upon the scent of some new
problem. I rang the bell and was shown up to the chamber which
had formerly been in part my own.
            </div> 
        </div> 
    </body> 
</html>

解決

これは、ラインハイイトボックスの下に「QJPG）「突き出て」「QJPG）に関係しているようです。 FirefoxとSafariはこれを行う方法に同意しているようです - キャラクターは突き出ることが許されています。しかし、サイズx 10を誇張することで、私たちは何か面白いことに気づきます sans-serif.

Mac OS Xでは、SafariとFirefoxの両方が選んだ helvetica の書体として sans-serif. 。しかし、Firefoxはその特定の書体をラインハイイトボックスで上向きに移動するため、底が「突き出ていません」。と比べて arial - マイクロソフトのろくでなし helvetica 両方のブラウザがそれを突き出す場所。

Safari vs Firefox descender sans-serif/arial

あなたの問題の解決策は、コンテンツを上向きに相殺する「合理的な」負のマージンを見つけることだと思います。両方のようです helvetica と arial 箱の上部に「小刻みの部屋」があります。私は使うだろう #wrapper #content { margin-top: -1px; } （克服するための特別なセレクター #wrapper *）特定のもの font-size/line-height あなたの例で。

これが私のテストコードです。「突き出」がより悪くなる可能性があることを示しています geneva と verdana.

<!DOCTYPE HTML> 
<html lang="en"> 
    <head> 
        <meta charset="utf-8"/> 
        <title>descender issue</title> 
        <style> 

          * {
            margin: 0;
            padding: 0;
          }

          .content {
            margin-bottom: 30px;
            background: #ffdd88;
            font-size: 190px;
            line-height: 210px;
          }

          #content1 {
            font-family: sans-serif;
          }

          #content2 {
            font-family: arial;
          }

          #content3 {
            font-family: geneva;
          }


          #content4 {
            font-family: helvetica;
          }

          #content5 {
            font-family: 'trebuchet ms';
          }

          #content6 {
            font-family: verdana;
          }

          #content7 {
            font-family: serif;
          }

          #content8 {
            font-family: times;
          }

        </style> 
    </head> 
    <body> 
      <h1>descender issue</h1> 
      sans-serif
        <div class="content" id="content1"> 
          lfgjpq
        </div> 
      arial
        <div class="content" id="content2"> 
          lfgjpq
        </div> 
      geneva
        <div class="content" id="content3"> 
          lfgjpq
        </div> 
      helvetica
        <div class="content" id="content4"> 
          lfgjpq
        </div> 
      trebuchet ms
        <div class="content" id="content5"> 
          lfgjpq
        </div> 
      verdana
        <div class="content" id="content6"> 
          lfgjpq
        </div> 
      serif
        <div class="content" id="content7"> 
          lfgjpq
        </div> 
      times
        <div class="content" id="content8"> 
          lfgjpq
        </div> 
    </body> 
</html>

他のヒント

ラインの高さを1px増加させましたか？ Chromeで試してみましたが、機能します。

line-height: 22px;
height: 220px; /* A multiple of line height */

と：

document.getElementById('wrapper').scrollTop += 220;

または、フォントサイズを1px減らすこともできます。これは私にとっても機能します。

/* alternative solution: */
font-size: 18px;

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow