csssafarioverflow
Overflow Scroll not working on MacOS Safari 13 and below
I have a category menu and list of projects whereby on the main tag we have
margin-top: 250px;
height: calc(100vh - 250px);
From the above, if the projects' container has a height bigger than calc(100vh - 250px), then by default it's scrollable.
If the projects' container has a height smaller than calc(100vh - 250px), then we flex-end everything (menu, container) to the bottom of the page. The projects container has overflow-y: scroll;
This is working perfectly in all browsers except MacOS (Catalina) Safari 13 and below.
In Safari 13, all the projects that are supposed to be scrollable are reduced in height to fit the available height calc(100vh - 250px).
Normal and expected view
Faulty view Safari 13, using https://testingbot.com/ to test
You can view the page here https://category-scrollings.tiiny.site/ (Free trial expiring in 7 days).
const panels = Array.from(document.querySelectorAll(".projects-container"));
const menus = Array.from(document.querySelectorAll(".nav-item"));
menus.forEach(function (menu) {
menu.addEventListener("click", function (event) {
console.log("event:", event.target);
menus.forEach(function (_menu, index) {
const _panel = panels[index];
_menu.classList.remove("clicked");
_panel.classList.remove("active");
});
const panelId = `${event.target.id.split("-")[0]}-panel`;
const panel = document.getElementById(panelId);
event.target.classList.add("clicked");
panel.classList.add("active");
});
}); body {
height: 100vh;
overflow: hidden;
}
main {
display: flex;
-webkit-box-pack: start;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
}
.container {
display: flex;
margin-top: 250px;
flex-direction: column;
-webkit-box-pack: end;
justify-content: flex-end;
align-items: flex-start;
width: calc(50vw - 25px);
height: calc(100vh - 250px);
}
.nav {
display: flex;
flex-direction: row;
-webkit-box-pack: start;
justify-content: flex-start;
top: 200px;
-webkit-box-align: center;
align-items: center;
padding: 6px 0px;
background-color: rgb(255, 255, 255);
position: sticky;
z-index: 1000;
width: 100%;
}
.nav-item {
cursor: pointer;
font-size: 0.688rem;
line-height: 1.334rem;
margin: 0px;
font-family: "ABC Favorit", sans-serif;
color: #ccc;
text-transform: uppercase;
letter-spacing: 0.6px;
font-weight: 600;
margin-right: 16px;
}
.nav-item.clicked {
color: #000;
}
.projects-container.active {
display: flex;
}
.projects-container {
display: none;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
-webkit-align-items: flex-center;
-webkit-box-align: flex-center;
-ms-flex-align: flex-center;
align-items: center;
height: auto;
width: 100%;
overflow-y: scroll;
padding-bottom: 20px;
}
.projects {
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: flex-start;
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
width: 100%;
overflow-y: scroll;
}
.project {
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
border-top: 0.9px solid #d9d9d9;
}
.boxes {
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: auto;
cursor: pointer;
min-width: 140px;
}
.box {
display: block;
height: 27px;
width: 7px;
}
.box.blue {
background-color: blue;
}
.box.white {
background-color: white;
}
.box.yellow {
background-color: yellow;
}
.box.red {
background-color: red;
}
.box.black {
background-color: black;
}
.title-container {
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 355px;
width: 100%;
cursor: pointer;
padding: 9px 0;
}
.title {
margin: 0;
color: #000;
font-family: "ABC Favorit", sans-serif;
max-width: 255px;
width: 100%;
font-size: 0.875rem;
font-weight: 400;
text-transform: uppercase;
line-height: 0.875rem;
margin-top: 1.7px;
margin-left: 50px;
margin-right: 50px;
}<main>
<div class="container">
<div class="nav">
<div id="all-menu" class="nav-item clicked">All</div>
<div id="cars-menu" class="nav-item">Cars</div>
<div id="fashion-menu" class="nav-item">Fashion</div>
</div>
<div id="all-panel" class="projects-container all active">
<div class="projects">
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">AMDILK VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">AMDILK VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">AMDILK VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">AMDILK VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">AMDILK VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">AMDILK VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">AMDILK VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">AMDILK VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">AMDILK VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">AMDILK VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">IULH VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ULHF VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">UYJHF VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">UYJHF VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">UYJHF VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">UYJHF VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">UYJHF VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ALIUIYF VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">HEYsh VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">YTKGUIY VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">rjke VERBINDEN</p>
</div>
</div>
</div>
</div>
<div id="cars-panel" class="projects-container cars">
<div class="projects">
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">AMDILK VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">IULH VERBINDEN</p>
</div>
</div>
</div>
</div>
<div id="fashion-panel" class="projects-container fashion">
<div class="projects">
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">UYJHF VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ALIUIYF VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">HEYsh VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">YTKGUIY VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">rjke VERBINDEN</p>
</div>
</div>
</div>
</div>
</div>
</main>Click Expand Snippet to see all
Solution
I have figured out the answer myself. It appears I needed to assign a height to the project class
// either
.project {
...
height: 35px;
}
// Or
.project {
...
min-height: fit-content;
height: 100%;
}
- Simple frame by frame video decoder library
- GCC no longer implements <varargs.h>
- Contents of IO buffer unknown == unsafe?
- Avoiding strcpy overflow destination warning
- Sort program not working, not sure why
- Fast & accurate atan/arctan approximation algorithm
- What's the difference between strtok_r and strtok_s in C?
- How memory address for pointer to arrays is same as an element in 2D array?
- Which is the best way to suppress "unused variable" warning
- How to use ellipsis in c's case statement?
- How can I exclude non-numeric keys? CS50 Caesar Pset2
- Fast ceiling of an integer division in C / C++
- Is there an invalid pthread_t id?
- How to Implement Universal Setter/Getter Functions for Interrupt-Driven Variables in Embedded C?
- How does SIMD (avx) processing work? for example, if I want 10 32 bit floats how do i fit in a 256 bit avx vector?
- FDCAN problems on STM32G4
- How does the call macro enable mutual recursion between functions f and g in this Hanoi Tower implementation?
- Running test on Rocket core CPU - global variable initialized to 0 is unsuccessful, output wrong value instead
- Interacting with C arrays without knowing the size
- Combination of two strings
- carriage return by fgets
- How to use special characters in C?
- Why does 1.0/100.0 == 0.1/10.0 give True?
- Is it correct to compare pointers in C?
- Force free() to return malloc memory back to OS
- How can I print to standard error in C with 'printf'?
- What is the standard behavior of fread in C on Windows?
- How is strtok removing lines it shouldn't have access to?
- Using array as smart point in C
- Assigning string to malloced 2d char array not working as intended