Bug 301926

Summary: Hairline crack space between bottom border and canvas
Product: WebKit Reporter: Mike McCollister <Mike>
Component: CanvasAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: ap, sabouhallawa, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: iPhone / iPad   
OS: iOS 26   
See Also: https://bugs.webkit.org/show_bug.cgi?id=257325
Attachments:
Description Flags
Test HTML file to show issue. none

Mike McCollister
Reported 2025-11-04 04:43:33 PST
HTML canvas on iOS/iPadOS devices shows a small gap between the canvas and the bottom border. I've fixed this problem in the past with a div by adding "display: block;" but that does not work on the canvas. I asked about this on StackOverflow and someone suggested that this is a bug in Webkit due to "antialiasing rounding issue, caused by the default user-agent rules". See https://stackoverflow.com/questions/79807971/how-to-get-rid-of-unwanted-space-between-bottom-border-and-canvas-on-ios-ipados. I have verified that this happens on iOS/iPadOS 26.0.1, 26.1 and have seen the issue on iOS/iPadOS 18.6 as well. I have not tested this on macOS.
Attachments
Test HTML file to show issue. (788 bytes, text/html)
2025-11-04 09:53 PST, Mike McCollister 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Mike McCollister
Comment 1 2025-11-04 09:53:41 PST
Created attachment 477290 [details] Test HTML file to show issue.
Alexey Proskuryakov
Comment 2 2025-11-05 16:40:18 PST
I can reproduce this on macOS too. Happens when the canvas is taller than 16 px, doesn't happen with smaller canvases. May be the same as bug 257325, but this test is simpler .
Radar WebKit Bug Importer
Comment 3 2025-11-11 04:44:11 PST
<rdar://problem/164472788>
Note You need to log in before you can comment on or make changes to this bug.