WebKit有剪切错误吗？ [英] Does WebKit have a clipping bug?
问题描述
给定一个区域，其中行高和任何边距都 n ，并且该区域的高度是 n ，并且scrollTop增加了 n的倍数。我发现我在Firefox，Opera和NetFront中得到的结果，但在Chrome
Given a region where the line-height and any margins are n, and the region has a height that is a multiple of n, and the scrollTop is increased by multiples of n I find that I get the result I expect in Firefox, Opera and NetFront but in Chrome (Windows), Safari (Mac) and the latest WebKit nightly (Mac) there is some leakage and I see partial lines.
在我的实际项目（我不能共享）中，有一些漏洞，效果非常明显，但即使在减少的测试用例中，也可以看到上一行的底部在框的顶部突出。
In my actual project (which I can't share) the effect is quite pronounced, but even in a reduced test case, the bottom of the previous line can be seen peaking out at the top of the box.
Is它可以避免这种影响？这是一个在WebKit渲染引擎中的错误，应该报告？
可以看到减少的测试用例和在我的网站上显示实例。点击文档几次滚动它，而不是框顶部的点（它们是上一行的字母的底部）。
The reduced test case can be seen below and as a live example on my website. Click on the document a few times to scroll it and not the dots at the top of the box (which are the bottom of the letters of the previous line).
<!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—excellent for drawing the
veil from men’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—it was on the twentieth of March, 1888—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>
推荐答案
伸出在行高框下面。 Firefox和Safari似乎同意如何做到这一点 - 字符被允许突出。但是通过夸大尺寸x 10，我们注意到 sans-serif 有趣的一些。
It appears this has to do with descenders (qjpg) "sticking out" down below the line-height box. Firefox and Safari seem to agree on how to do this - characters are allowed to stick out. However by exaggerating the sizes x 10, we notice something interesting for sans-serif.
在Mac OS X中， Safari和Firefox选择 helvetica 作为 sans-serif 的字体。但是Firefox在行高框中向上移动那个特定的字体，所以底部不会伸出。与 arial 比较： helvetica 这两个浏览器都让它伸出。
In Mac OS X, both Safari and Firefox chose helvetica as the typeface for sans-serif. But Firefox moves that particular typeface upwards in the line-height box, so the bottom doesn't "stick out". Compare with arial - microsoft's bastardization of helvetica where both browsers let it stick out.
我认为你的问题的解决方案是找到一个合理的负边距来抵消内容向上。看起来 helvetica 和 arial 在框的顶部有一些摆动的房间。我会使用 #wrapper #content {margin-top：-1px; } / line-height 。
I think the solution to your problem is to find a "reasonable" negative margin to offset the content upwards. It seems both helvetica and arial have some "wiggle room" at the top of the box. I would use #wrapper #content { margin-top: -1px; } (selector extra strong to overcome #wrapper *) for the specific font-size/line-height in your example.
这是我的测试代码。它表明 geneva 和 verdana 的突出可能更糟。
Here's my test code. It shows that the "sticking out" can be much worse for geneva and 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>
这篇关于WebKit有剪切错误吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
