12607 2007-02-04 20:51:51 -0800 Links with naturally italic text not repainted properly 2022-08-30 20:17:30 -0700 1 1 1 Unclassified WebKit Layout and Rendering 418.x Mac OS X 10.4 NEW HasReduction, InRadar P3 Normal --- 1 dev+webkit webkit-unassigned ahmad.saleem792 ap bfulgham dtrebbien mitz mmaxfield simon.fraser webkit-bug-importer webkitbugs zalan oldest_to_newest 27585 0 dev+webkit 2007-02-04 20:51:51 -0800 Links whose font is italic in it's normal state or whose only variant is italic are not repainted properly on hover. Clicking one of these links and then going back in history results in the area that was not repainted before being repainted properly, but still isn't repainted properly on hover. This happens in Safari 2.0.4 (419.3/WebKit 418.9.1) and doesn't appear to be a regression. The testcase I'm attaching uses "Brush Script MT" which has no "regular" style, only italic. The font "Monotype Corsiva" also displays the same misrendering and only has regular with no italic style, but doesn't seem to be a default OS X font (probably from MS Office). To reproduce - 1. Open the attached test case. 2. Hover over the 'A' (note the incomplete repaint). 3. Click the link. 4. *Without moving your mouse* press backspace. 5. The 'A' should be completely red. 6. Move the mouse to unhover (no properly repainted). 27586 1 12927 dev+webkit 2007-02-04 20:52:53 -0800 Created attachment 12927 Testcase 27587 2 12928 dev+webkit 2007-02-04 20:53:33 -0800 Created attachment 12928 Screenshot of hover 27588 3 dev+webkit 2007-02-04 20:58:01 -0800 Firefox and Opera both get this wrong too, so I don't know how fixable it even is. 27567 4 mitz 2007-02-04 22:37:55 -0800 See also bug 6274. 71247 5 ddkilzer 2008-02-20 08:20:13 -0800 See also Bug 17026. 89673 6 webkitbugs 2008-08-28 13:33:59 -0700 I've just recently run into this bug with italic Helvetica at 11px. Safari 3.1.2 (5525.20.1) & WebKit r35963. I've found a workaround. By adding a small equally opposing amount of padding and margin, :hover paints correctly while *seemingly* not changing the layout. ex (longhand, using the attached "Testcase"): a { padding-right: 1em; margin-right: -1em; padding-left: 1em; margin-left: -1em; } Notes: - The amount of padding/negative margin depends on the font and the amount to which italicization pushes outside of the character area. In my case, with italic Helvetica, I could set the amount to 0.1em/-0.1em. In the Testcase, 1em did the trick. I guess one could use any value since it's effectively getting canceled out by the equivalent negative margin. But because there may be unforeseen side effects of this workaround, I'd think using the lowest value would be best. - Ems are best (obviously) because they scale with increases in font size. Which means the workaround will continue to work if the user "Makes Text Bigger". - In my case (which is wrapped in <ul> and <li>) I also found that defining "li { list-style: none; }" causes the bug to appear. When I removed, the bug went away. 89675 7 webkitbugs 2008-08-28 13:52:50 -0700 One additional note that I should have added: - It's the "padding-right/left" value that fixes the painting issue. The equivalent negative margin is only used to negate whatever position change the padding value made. 89677 8 hyatt 2008-08-28 14:15:55 -0700 Firefox 3 gets this right now. They account for glyphs overflowing bounds somehow. 89684 9 mitz 2008-08-28 14:38:34 -0700 (In reply to comment #8) > Firefox 3 gets this right now. They account for glyphs overflowing bounds > somehow. To solve the italics case you just need to add overflow equal to the sine of the italics angle times the font height. 89688 10 hyatt 2008-08-28 14:46:50 -0700 I would have thought we only needed to do that for synthesized italics though. 89689 11 mitz 2008-08-28 14:55:52 -0700 Nope. We size the text box based on the glyphs' advances, which are typically the same for italics (spaces between glyphs don't change in italics) so the top edge of a the last glyph extends beyond the right edge of the text box. Of course, there are other cases where fonts draw beyond their "typographic bounds" which are harder to account for. 89694 12 hyatt 2008-08-28 15:41:33 -0700 Ah I see. Well seems easy enough to just incorporate this as overflow. 95053 13 24306 webkitbugs 2008-10-12 12:11:20 -0700 Created attachment 24306 Testcase 02 (negative letter spacing) 95054 14 webkitbugs 2008-10-12 12:12:41 -0700 I found that this problem also effect normal type (ex: Helvetica, non-italic) with negative letter spacing. I've attached a test case ("Testcase 02 (negative letter spacing) "). Tested in Safari 3.1.2 (5525.20.1) & WebKit-SVN-r37469. 1894967 15 ahmad.saleem792 2022-08-30 15:43:38 -0700 I am able to reproduce this bug from both test cases in Safari Technology Preview 152 and in first test case 'test case', upon hover, edges of "A" are still not completely red and have some black color and in case of other "Testcase 02", when I pressed without releasing, it changes color to "red" but red is not through "S" or "W" and has some edges as Blue. Other browsers (Chrome Canary 107 and Firefox Nightly 107) works fine. Thanks! 1895041 16 webkit-bug-importer 2022-08-30 20:17:30 -0700 <rdar://problem/99364769> 12927 2007-02-04 20:52:53 -0800 2007-02-04 20:52:53 -0800 Testcase wings1012.html text/html 213 dev+webkit PGh0bWw+Cgo8aGVhZD4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KYSB7IGNvbG9yOiBibGFjazsg Zm9udC1zaXplOiA0OHB4OyBmb250LWZhbWlseTogJ0JydXNoIFNjcmlwdCBNVCc7IH0KYTpob3Zl ciB7IGNvbG9yOiByZWQ7IH0KPC9zdHlsZT4KPC9oZWFkPgoKPGJvZHk+CjxhIGhyZWY9ImRhdGE6 dGV4dC9odG1sLEdvIGJhY2suIj5BPC9hPgo8L2JvZHk+Cgo8L2h0bWw+ 12928 2007-02-04 20:53:33 -0800 2007-02-04 20:53:33 -0800 Screenshot of hover Hover.png image/png 3260 dev+webkit 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 AAAASUVORK5CYII= 24306 2008-10-12 12:11:20 -0700 2008-10-12 12:11:20 -0700 Testcase 02 (negative letter spacing) Bug_12607-testcase_02.html text/html 523 webkitbugs PCFET0NUWVBFIGh0bWwgUFVCTElDICItLy9XM0MvL0RURCBIVE1MIDQuMDEgVHJhbnNpdGlvbmFs Ly9FTiIKICAgImh0dHA6Ly93d3cudzMub3JnL1RSL2h0bWw0L2xvb3NlLmR0ZCI+Cgo8aHRtbCBs YW5nPSJlbiI+CjxoZWFkPgoJPG1ldGEgaHR0cC1lcXVpdj0iQ29udGVudC1UeXBlIiBjb250ZW50 PSJ0ZXh0L2h0bWw7IGNoYXJzZXQ9dXRmLTgiPgoJPHRpdGxlPldlYktpdCBCdWcgMTI2MDc6IFRl c3RjYXNlIDAyPC90aXRsZT4KCgk8c3R5bGUgdHlwZT0idGV4dC9jc3MiIG1lZGlhPSJzY3JlZW4i PgoJCWJvZHkgewoJCQlmb250LXNpemU6IDEwMHB4OwoJCQlmb250LWZhbWlseTogSGVsdmV0aWNh OwoJCQlsZXR0ZXItc3BhY2luZzogLThweDsKCQl9CgkJCgkJYSB7CgkJCXRleHQtZGVjb3JhdGlv bjogbm9uZQoJCX0KCTwvc3R5bGU+Cgo8L2hlYWQ+Cjxib2R5PgoKPGEgaHJlZj0iaHR0cDovL2Fw cGxlLmNvbS8iPlM8L2E+CjxhIGhyZWY9Imh0dHA6Ly9hcHBsZS5jb20vIj5XPC9hPgoKPC9ib2R5 Pgo8L2h0bWw+Cg==