Bug 262111

Summary: Broken 'button' layout with display:table on www.weekly10.com
Product: WebKit Reporter: Ahmad Saleem <ahmad.saleem792>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: bfulgham, karlcow, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: BrowserCompat, InRadar, NeedsReduction
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
Screenshot
none
rendering in Safari, firefox, chrome
none
rendering in Safari, firefox, chrome
none
reduced-example none

Ahmad Saleem
Reported 2023-09-26 05:24:52 PDT
Hi Team, While stumbling across this website, I noticed that website has broken 'Book a demo' button layout in Safari (Safari 16.6, Safari Technology Preview 179 and WebKit ToT) while Chrome Canary 119 and Firefox Nightly works fine. Website: https://www.weekly10.com It is not reduced test case but just thought to raise it. Just wanted to raise so we can fix it. Thanks!
Attachments
Screenshot (26.34 KB, image/png)
2023-09-26 12:53 PDT, Simon Fraser (smfr) 		no flags
Details
rendering in Safari, firefox, chrome (264.51 KB, image/png)
2023-09-27 01:18 PDT, Karl Dubost 		no flags
Details
rendering in Safari, firefox, chrome (1.01 MB, image/png)
2023-09-27 01:25 PDT, Karl Dubost 		no flags
Details
reduced-example (823 bytes, text/html)
2023-09-27 02:01 PDT, Karl Dubost 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Simon Fraser (smfr)
Comment 1 2023-09-26 12:53:02 PDT
Created attachment 467879 [details] Screenshot
Karl Dubost
Comment 2 2023-09-27 01:18:02 PDT
Created attachment 467888 [details] rendering in Safari, firefox, chrome narrow window doesn't show the issue.
Karl Dubost
Comment 3 2023-09-27 01:25:50 PDT
Created attachment 467889 [details] rendering in Safari, firefox, chrome The container is getting a flex for a wider viewport.
Karl Dubost
Comment 4 2023-09-27 02:01:57 PDT
Created attachment 467891 [details] reduced-example ok. this is a bit strange. Simply disabling the border on .secondary-cta fixes the issue.
Karl Dubost
Comment 5 2023-09-27 02:07:53 PDT
Another interesting detail, I have a different behavior if 1. I load the file and disable the border. (issue is exhibited) 2. I remove the border and load the file. (layout of two boxes work well)
Radar WebKit Bug Importer
Comment 6 2023-09-27 02:08:31 PDT
<rdar://problem/116110440>
Karl Dubost
Comment 7 2025-02-02 22:54:58 PST
So the test case, still shows a difference, but the website has changed layout. https://bug-262111-attachments.webkit.org/attachment.cgi?id=467891
Note You need to log in before you can comment on or make changes to this bug.