7

I am creating a complex grid layout using Flexbox (CSS Grid is not supported by browsers I'm needing to support) and I have the layout working completely as expected in Chrome and Firefox, but on Safari the majority of my flex-items have 0 height and are not displaying correctly.

I've created a CodePen so demonstrate where my code is at (Apologies for the CSS, had to copy and paste from my project output) https://s.codepen.io/glennflanagan82/debug/NgPXJR/LQkExPgxmyxA

If you visit the link above on Chrome/Firefox you should see the grid layout with the hover functionality on the tiles, but on Safari none of the images display and none of the text. I have determined this is Safari setting the grid-tile__link elements to have 0 height but I don't understand why.

I'm totally stumped on this so any help would be appreciated.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Glenn Flanagan
  • 91
  • 1
  • 1
  • 4
  • 1
    Unfortunately, the linked CodePen has expired. Therefore, because the question does not include within itself any code snippet, nor enough info to know what code was involved, this is not a useful question. If it weren't already closed as a duplicate, I would vote to close it as too vague. – ToolmakerSteve Oct 19 '19 at 19:52
  • @ToolmakerSteve, thanks for the feedback. I've found that most of the time percentage height doesn't work in Safari is due to the reasons outlined in the duplicate you referenced. And most of the time the solutions there solve the problem. – Michael Benjamin Oct 19 '19 at 19:53
  • If you have a problem with percentage heights not working in Safari, and you haven't found an answer, please post a question with the details. – Michael Benjamin Oct 19 '19 at 19:54
  • 1
    @Michael_B - Ok. I didn't see anything in this question that said OP was using percentage height; perhaps that was in the CodePen, that was visible at the time you saw that. I've encountered a different issue, that works in Chrome, Firefox, and Edge 18, but not Safari, involving *nested* flex items. Neither of the two linked duplicates are relevant to that; note OP's comment on accepted answer, that he likewise had a Safari-specific issue involving "nested items". If there was enough detail in his Q, I would add an answer (he didn't), and suggest to re-open as not a duplicate. Enough said here – ToolmakerSteve Oct 19 '19 at 20:06
  • 1
    Anyone else who encounters a Safari-only issue with *nested* flex items: In Safari Developer tools, inspect the *nested* flex elements. If you see zero height, or inspector doesn't show a location+height tooltip for one of the *intermediate* elements, add `display:flex` (and maybe direction) to all but the deepest element. Other changes may be required, such as removing explicit height/width - replacing with flexbox attributes e.g. `flex:` or `flex-grow:`; adding position: relative. – ToolmakerSteve Oct 19 '19 at 20:14

0 Answers0