2

I'm currently working into a project where I've found an issue which happens only on safari and I can't find a proper way to fix it without too much complication. Let me explain it.

The issue occurred in my popup design, the main block (.popup-bg) has a display grid and place-items center, in order to center and have a dynamic height in function of his content but he should not outbound screen window. This works great in Chrome, Firefox and even Edge (minus place-items) but in Safari it doesn't work properly and the grid blowout. This happened when the inner div have a display flex and overflow set to scroll.

And when I set .popup-bg to display: flex; instead of grid Safari resize it correctly, but inner item's height is not guaranteed.

How can i make it work with the grid? Thanks for your help

enter image description here

the sample to reproduce this issue :

* {
    box-sizing: border-box;
}
.popup-bg {
    min-width: 320px;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: green;
    display: grid;
    align-content: center;
    justify-items: center;
    padding: 40px;
}

.popup {
    background-color: white;
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    place-items: stretch;
    overflow: hidden;
}
.vertical-container {
    display: flex;
    flex-direction: column;
    place-items: stretch;
    overflow-y: auto;
}
.displayer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    overflow-y: auto;
    flex: 1;
}
.block {
    background: blue;
    border: solid 1px yellow;
    display: flex;
}
.block:after {
  content: '';
  width: 50px;
  height: 50px;
}
.selector {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    width: 100%;
}
<div class="popup-bg">
    <div class="popup">
        <div class=vertical-container>
            <div class="displayer">
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
            </div>
            <div class="selector">
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
            </div>
        </div>
    </div>
</div>
Nagarian47
  • 31
  • 5

3 Answers3

0

try to put display: grid on parent element, it helped me https://stackoverflow.com/a/63197330/14101530

Pavel Bondarenko
  • 31
  • 4
  • 2
    Welcome to Stack Overflow. Please take the [tour] and read [answer]. This is a borderline link-only answer and is at risk of being deleted as "very low quality". Also, [please don't post identical answers](https://meta.stackexchange.com/q/104227/248627) to [multiple questions](https://stackoverflow.com/a/69887665/354577). – ChrisGPT was on strike Nov 08 '21 at 18:34
  • 1
    As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 08 '21 at 22:38
0

Add flex: 0 0 auto; at the right place:

.displayer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    overflow-y: auto;
    // flex: 1;
}
.selector {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    // width: 100%;
    flex: 0 0 auto;
}
Tomerikoo
  • 18,379
  • 16
  • 47
  • 61
Nagarian47
  • 31
  • 5
-3

@Nagarian47 Try to add the media query in your style part

TPath
  • 9
  • 6
  • which media query do you talk about? – Nagarian47 Jun 22 '20 at 10:51
  • you can search for 'media query for browsers'. for example like this blog https://www.ryadel.com/en/css3-media-query-target-only-ie-ie6-ie11-firefox-chrome-safari-edge/ – TPath Jun 22 '20 at 10:57
  • Your answer doesn't help me in any way, what do you expect me to put on a media query? Do you mean making a media query specific to Safari where I rewrite all the CSS? That should not be efficient to maintain – Nagarian47 Jun 22 '20 at 11:01
  • put your css code within safari's media query and also if you need other browsers then you can add your css part on that browsers media query – TPath Jun 22 '20 at 11:05
  • Seems not be related on `@media` queries the _issue_. – Lionel T Oct 02 '20 at 14:56