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

Description Ahmad Saleem 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!
Comment 1 Simon Fraser (smfr) 2023-09-26 12:53:02 PDT 
Created attachment 467879 [details]
Screenshot
Comment 2 Karl Dubost 2023-09-27 01:18:02 PDT 
Created attachment 467888 [details]
rendering in Safari, firefox, chrome

narrow window doesn't show the issue.
Comment 3 Karl Dubost 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.
Comment 4 Karl Dubost 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.
Comment 5 Karl Dubost 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)
Comment 6 Radar WebKit Bug Importer 2023-09-27 02:08:31 PDT 
<rdar://problem/116110440>