Have you encountered a situation where a complex flex or grid layout works well in Chrome but collapses or breaks in Safari, especially on iOS and Mac? How did you debug the bugs in Safari?

Yes, issues with flex and grid in Safari, especially on iOS and Mac, are common due to the peculiarities of the WebKit engine implementation.

Typical symptoms: collapsing in height, incorrect size calculations, broken scrolling.

How I debugged:

• Used Safari Web Inspector to view computed styles and layout.
• Checked if elements have properties like min-height, max-height, overflow, which Safari handles differently.
• Added temporary borders and backgrounds to visualize areas.
• Tried setting explicit sizes or using flex-shrink: 0 to prevent collapsing.
• Looked for known bugs in Safari, such as those related to min-height: 100% inside flex containers.
• Used CSS hacks or prefixes if they helped.

Sometimes adding -webkit-overflow-scrolling: touch; helps with proper scrolling on iOS.

If the bug is complex, isolating the problem in a minimal example and searching for workarounds or restructuring the markup can be effective.