search

philipwalton / flexbugs

A community-curated list of flexbox issues and cross-browser workarounds for them.
MIT License
13.63k stars 495 forks source link

Safari: flex-basis with flex-direction: column and justify-content: center causes elements to overflow parent #192

Closed awayken closed 1 year ago

awayken commented 7 years ago

When using justify-content: center and flex-direction: column, Safari seems to miscalculate the height of the flex parent when some of the flex items have a flex-basis specified. The result is that some items can spill out of the box at the flex-start.

Has anyone else run into this? I had a page where my heading (the first element in my flex container) was spilling up out of the parent and became white text on white background. It took a long time to figure out what exactly was going on. I see it in Safari 10.0.2 and Mobile Safari on iOS 10.2.

I'm not sure if this is a bug or not, so I haven't submitted it to the WebKit team. If there's any sort of validation in here that this is a true bug (and not just some part of the spec I don't understand), then I'll go ahead and submit it.

Test case: https://codepen.io/awayken/pen/wgazpb/ - in the problem browsers, Line 1 will be cut off as it overflows upward out of the <body>.

Work-around: either eliminate flex-basis on flex items or use justify-content: flex-start or justify-content: flex-end. There might be other justify-content values that work, too.

danielcompton commented 7 years ago

This looks like a bug to me, I'd recommend opening a bug on Webkit or Apple BugReporter.

awayken commented 7 years ago

@danielcompton Submitted to Safari. We'll see if they kick it back as a WebKit problem or not.

Fredark commented 7 years ago

Have you tried to use min-height with the same value as the flex-basis? I think it could work.

philipwalton commented 7 years ago

@awayken Can you paste the bug link in this issue?

awayken commented 7 years ago

@philipwalton This is my first submission to the Safari bug tracker, but as far as I can see, they don't offer public links to the bugs. When I log in, it has the appearance of an email in an inbox rather than a forum post or BugZilla listing. If anyone has insight into how I'd find the public link, I'd be more than happy to share it in this thread.

philipwalton commented 7 years ago

@awayken if you look at this project's README, you'll notice lots of links to Safari bugs. Is that where you're submitting?

awayken commented 7 years ago

@philipwalton It looks like the Safari bug links are actually WebKit bug links. I submitted mine straight to Safari because I wasn't sure if it was truly WebKit or Safari that had the issue. I figured I'd start where I knew I was seeing the issue, and they would tell me if I should resubmit elsewhere. (And I've never tried downloading or compiling WebKit on its own.)

Of course, now that it's a month on and I've heard nothing back, I'm starting to wonder if I should just submit to WebKit anyway, even just for some feedback on the bug.

philipwalton commented 7 years ago

FYI: Safari is the browser and Webkit is the rendering engine Safari uses. If it's an issue with flexbox then it's definitely a Webkit issue. (A Safari issue would be something like if the back button isn't working.)

awayken commented 7 years ago

Submitted bug to WebKit: https://bugs.webkit.org/show_bug.cgi?id=168130

mesqueeb commented 4 years ago

Is it possible that this is the reason I'm seeing a bug like this on my website?

Screenshot 2020-07-14 09 57 02
awayken commented 1 year ago

It looks like this has been addressed.

Safari, Chrome, and Firefox all agree on rendering for both test cases. I don't believe there is any remaining compatibility issue. -- Brent Fulgham, 2022-07-15 11:26:15 PDT, Permalink