javascript - Does WebKit have a clipping bug? -
given region line-height , margins n, , region has height multiple of n, , scrolltop increased multiples of n find result expect in firefox, opera , netfront in chrome (windows), safari (mac) , latest webkit nightly (mac) there leakage , see partial lines.
in actual project (which can't share) effect quite pronounced, in reduced test case, bottom of previous line can seen peaking out @ top of box.
is possible avoid effect? bug in webkit rendering engine should reported?
the reduced test case can seen below , as live example on website. click on document few times scroll , not dots @ top of box (which bottom of letters of 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; /* multiple of line height */ overflow: hidden; } #wrapper * { margin: 0; padding: 0; } #wrapper p { margin-bottom: 21px; /* same 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 <i>the</i> woman. have seldom heard him mention under other name. in eyes eclipses , predominates whole of sex. not felt emotion akin love irene adler. emotions, , 1 particularly, abhorrent cold, precise admirably balanced mind. was, take it, perfect reasoning , observing machine world has seen, lover have placed himself in false position. never spoke of softer passions, save gibe , sneer. admirable things observer—excellent drawing veil men’s motives , actions. trained reasoner admit such intrusions own delicate , finely adjusted temperament introduce distracting factor might throw doubt upon mental results. grit in sensitive instrument, or crack in 1 of own high-power lenses, not more disturbing strong emotion in nature such his. , yet there 1 woman him, , woman late irene adler, of dubious , questionable memory. <p> had seen little of holmes lately. marriage had drifted away each other. own complete happiness, , home-centred interests rise around man first finds himself master of own establishment, sufficient absorb attention, while holmes, loathed every form of society whole bohemian soul, remained in our lodgings in baker street, buried among old books, , alternating week week between cocaine , ambition, drowsiness of drug, , fierce energy of own keen nature. still, ever, attracted study of crime, , occupied immense faculties , extraordinary powers of observation in following out clues, , clearing mysteries had been abandoned hopeless official police. time time heard vague account of doings: of summons odessa in case of trepoff murder, of clearing of singular tragedy of atkinson brothers @ trincomalee, , of mission had accomplished delicately , reigning family of holland. beyond these signs of activity, however, merely shared readers of daily press, knew little of former friend , companion. <p> 1 night—it on twentieth of march, 1888—i returning journey patient (for had returned civil practice), when way led me through baker street. passed well-remembered door, must associated in mind wooing, , dark incidents of study in scarlet, seized keen desire see holmes again, , know how employing extraordinary powers. rooms brilliantly lit, and, looked up, saw tall, spare figure pass twice in dark silhouette against blind. pacing room swiftly, eagerly, head sunk upon chest , hands clasped behind him. me, knew every mood , habit, attitude , manner told own story. @ work again. had risen out of drug-created dreams , hot upon scent of new problem. rang bell , shown chamber had formerly been in part own. </div> </div> </body> </html>
it appears has descenders (qjpg) "sticking out" down below line-height box. firefox , safari seem agree on how - characters allowed stick out. exaggerating sizes x 10, notice interesting sans-serif.
in mac os x, both safari , firefox chose helvetica typeface sans-serif. firefox moves particular typeface upwards in line-height box, bottom doesn't "stick out". compare arial - microsoft's bastardization of helvetica both browsers let stick out.
i think solution problem find "reasonable" negative margin offset content upwards. seems both helvetica , arial have "wiggle room" @ top of box. use #wrapper #content { margin-top: -1px; } (selector strong overcome #wrapper *) specific font-size/line-height in example.
here's test code. shows "sticking out" can worse 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>
Comments
Post a Comment