Why is safari does not react to my media queries? - sass

Question

I have a bunch of queries in my page. Chrome responds to all of them and Safari just won't render almost all of them and I'm wondering why. I can't even see them in Safari DevTools.
I thought that maybe there's something going on with root font-size or maybe browser scale so I set font-size to 100% and added specific value for breakpoints but I didn't worked out.
Here are queries from my .scss
#mixin respond ($breakpoint){
#if $breakpoint == ipadLand {
#media screen and (width: 1024px) and (height: 768px) {
body {
font-size: 75%;
}
.button_text{
font-size: 0.9rem;
}
.contacts_section_row{
top: 4.5rem;
}
.contact_header{
margin-top: 2rem;
}
.skills_container_row3{
margin-bottom: 0.5rem;
}
.contacts_section_col{
width: $picture_width;
}
.contacts_section_row{
width: calc(#{$picture_width} * 3);
}
.vk_picture{
height: $picture_width;
width: $picture_width;
margin: auto;
}
.tg_picture{
height: $picture_width;
width: $picture_width;
margin: auto;
}
.hh_picture{
height: $picture_width;
width: $picture_width;
margin: auto;
}
}}
#if $breakpoint == ipadpro12_port {
#media screen and (width: 1024px) and (height: 1366px){
$contact_section_height: 20rem;
body {
font-size: 120%;
}
.name_text{
font-size: 2.5rem;
padding-top: 1rem;
padding-left: 5vw;
}
.role_text{
font-size: 1.7rem;
padding-top: 0.6rem;
padding-left: 1rem;
}
.main_div{
height: 985.3px;
//height: calc((100vh + (#{$head_div_height} * 2)));
}
.photo_box{
height: 40%;
width: 100vw;
}
.photo{
margin: 0 auto;
margin-top: 50px;
width: auto;
height: 85%;
}
.vk_picture{
height: $picture_width;
width: $picture_width;
margin: auto;
}
.tg_picture{
height: $picture_width;
width: $picture_width;
margin: auto;
}
.hh_picture{
height: $picture_width;
width: $picture_width;
margin: auto;
}
.contacts_section_col{
width: calc((#{$picture_width} * 3) / 3);
}
.contacts_section_row{
margin-top: 1rem;
width: calc(#{$picture_width} * 3)
}
.contact_header{
text-align: center;
height: auto;
width: inherit;
margin: 0 auto;
margin-top: 1rem;
transform: translate(0);
}
.skills_container_row{
font-size: 2.5rem;
margin: 0px;
}
.skillsandprojects-col-one{
font-size: 2rem;
height: auto;
text-align: left;
}
.skillsandprojects_container{
position: absolute;
top: 40%;
right: 0;
left: 0;
width: 100%;
height: 35%;
margin: 0;
background-color: white;
border: none;
}
.contacts_section{
position: relative;
bottom: calc(100vh - (#{$main_div_height} + #{$head_div_height} + #{$contact_section_height}));
width: 100vw;
height: $contact_section_height;
//background-color: blue; }
//background-color: $header_text_color;
}
.button_text{
font-size: 1.6rem;
}
.skillsandprojects_container2{
position: absolute;
top: 75%;
right: 0;
left: 0;
height: 35%;
width: 100%;
}
.skills_container_row3{
width: 100%;
height: 39px;
border: none;
margin-bottom: 1rem;
}
}}
#if $breakpoint == ipad_port {
#media screen and (width: 768px) and (height: 1024px){
body {
font-size: 70%;
}
.name_text{
font-size: 1.5rem;
padding-top: 2rem;
padding-left: 5vw;
}
.role_text{
font-size: 0.7rem;
padding-top: 0.6rem;
padding-left: 0.5rem;
}
.main_div{
height: calc((100vh - (#{$head_div_height} + #{$contact_section_height})));
//height: 985.3px;
//height: calc((100vh + (#{$head_div_height} * 2)));
}
.photo_box{
height: 40%;
width: 100vw;
}
.photo{
margin: 0 auto;
margin-top: 25px;
width: auto;
height: 75%;
}
.vk_picture{
height: $picture_width;
width: $picture_width;
margin: auto;
}
.tg_picture{
height: $picture_width;
width: $picture_width;
margin: auto;
}
.hh_picture{
height: $picture_width;
width: $picture_width;
margin: auto;
}
.contacts_section_col{
width: calc((#{$picture_width} * 3) / 3);
}
.contacts_section_row{
width: calc(#{$picture_width} * 3)
}
.contact_header{
text-align: center;
height: auto;
width: inherit;
margin: 0 auto;
transform: translate(0);
}
.skills_container_row{
font-size: 1.5rem;
margin: 0px;
}
.skillsandprojects-col-one{
font-size: 1.8rem;
height: auto;
text-align: left;
}
.skillsandprojects_container{
position: absolute;
top: 40%;
right: 0;
left: 0;
width: 100%;
height: 35%;
margin: 0;
background-color: white;
border: none;
}
.button_text{
font-size: 0.79rem;
}
.skillsandprojects_container2{
position: absolute;
top: 75%;
right: 0;
left: 0;
height: 35%;
width: 100%;
}
.skills_container_row3{
width: 100%;
height: 39px;
border: none;
}
.contacts_section{
margin-top: 6rem;
}
}}
#if $breakpoint == phone {
#media screen and (max-width: 573px) and (max-height: 926px){
.name_text{
font-size: 1.5rem;
padding-top: 2rem;
padding-left: 5vw;
}
.role_text{
font-size: 0.7rem;
padding-top: 0.6rem;
padding-left: 0.5rem;
}
.main_div{
height: 985.3px;
//height: calc((100vh + (#{$head_div_height} * 2)));
}
.contact_header{
text-align: center;
height: auto;
width: inherit;
//height: $contacts_section_header_height;
transform: translate(0);
//margin: 0 auto;
margin-bottom: 0.2rem; }
.photo_box{
height: 40%;
width: 100vw;
}
.vk_picture{
width: 3.437rem;
height: 3.437rem;
}
.tg_picture{
width: 3.437rem;
height: 3.437rem;
}
.hh_picture{
width: 3.437rem;
height: 3.437rem;
}
.contacts_section_col{
width: calc((#{3.437rem} * 3) / 3);
}
.contacts_section_row{
width: calc(#{3.437rem} * 3)
}
.skills_container_row{
font-size: 1.5rem;
margin: 0px;
}
.skillsandprojects-col-one{
font-size: 1.8rem;
height: auto;
text-align: left;
}
.skillsandprojects_container{
position: absolute;
top: 40%;
right: 0;
left: 0;
width: 100%;
height: 35%;
margin: 0;
background-color: white;
border: none;
}
.button_text{
font-size: 0.9rem;
}
.skillsandprojects_container2{
position: absolute;
top: 75%;
right: 0;
left: 0;
height: 35%;
width: 100%;
}
.skills_container_row3{
width: 100%;
height: 39px;
//height: calc((100% - #{$skills_head-row})/3);
border: none;
}
}
}
#if $breakpoint == mac13 {
#media screen and (width: 1366px) and (height: 768px) {
.button_text{
font-size: 0.8rem;
}
}
}
#if $breakpoint == ipad11pro_port {
#media screen and (height: 1112px) and (width: 834px) {
body {
font-size: 70%;
}
.name_text{
font-size: 2.5rem;
padding-top: 1rem;
padding-left: 5vw;
}
.role_text{
font-size: 1.7rem;
padding-top: 0.6rem;
padding-left: 1rem;
}
.main_div{
height: 985.3px;
//height: calc((100vh + (#{$head_div_height} * 2)));
}
.photo_box{
height: 40%;
width: 100vw;
}
.photo{
margin: 0 auto;
margin-top: 50px;
width: auto;
height: 85%;
}
.vk_picture{
height: $picture_width;
width: $picture_width;
margin: auto;
}
.tg_picture{
height: $picture_width;
width: $picture_width;
margin: auto;
}
.hh_picture{
height: $picture_width;
width: $picture_width;
margin: auto;
}
.contacts_section_col{
width: calc((#{$picture_width} * 3) / 3);
}
.contacts_section_row{
margin-top: 1rem;
width: calc(#{$picture_width} * 3)
}
.button_text{
font-size: 1.3rem;
}
.contact_header{
text-align: center;
height: auto;
width: inherit;
margin: 0 auto;
margin-top: 1rem;
transform: translate(0);
}
.skills_container_row{
font-size: 2.5rem;
margin: 0px;
}
.skillsandprojects-col-one{
font-size: 2rem;
height: auto;
text-align: left;
}
.skillsandprojects_container{
position: absolute;
top: 40%;
right: 0;
left: 0;
width: 100%;
height: 35%;
margin: 0;
background-color: white;
border: none;
}
.contacts_section{
position: relative;
bottom: calc(100vh - (#{$main_div_height} + #{$head_div_height} + #{$contact_section_height}));
width: 100vw;
height: $contact_section_height;
}
.skillsandprojects_container2{
position: absolute;
top: 75%;
right: 0;
left: 0;
height: 35%;
width: 100%;
}
.skills_container_row3{
width: 100%;
height: 39px;
border: none;
margin-bottom: 1rem;
}
}
}
#if $breakpoint == ipad11pro_land {
#media screen and (width: 834px) and (height: 1112px) {
body {
font-size: 1200%;
}
.button_text {font-size: 1rem;}
}
}}

Answer 1

Okay, I figured this.
I haven't made it work the way I planned initially but I guess this will be the best thing to do.
THE ANSWER
So apparently Safari doesn't react to media queries with specific resolutions and you have to use ranges with either min or max height or width. Just rewrite your queries and Safari will handle them right
Before you throw me a comment - yes, I'm aware that it's not the best practice to put specific resolutions and media queries. I was trying to make this way so I can tailor the design for each resolution. I didn't wanted to expand mobile design for tablets and I did wanted them to keep desktop version in landscape while preserve mobile in portrait.
The easier way to achieve that effect was to aim in specific green sizes - it didn't work out and now I realize that I can achieve the same effect with different queries for width and height.
As a bonus I'm willing to share queries sizes I found perfect for screens from iPhone SE to MacBook Pro 16
#mixin respond ($breakpoint){
#if $breakpoint == phone {
#media screen and (max-width: 1024px) and (max-height: 1366px){
//this is for phones and tablets in portrait
// query styles go here }}
#if $breakpoint == tab_land {
#media screen and (min-width: 1024px) and (max-height: 1366px){
//query styles go here}
}}
#if $breakpoint == mac13 {
#media screen and (min-width: 1366px) {
// query styles go here }}
#if $breakpoint == mac15 {
#media screen and (min-width: 1600px) {
// query styles go here
}}
#if $breakpoint == mac16 {
#media screen and (min-width: 2560px) {
// query styles go here
}
}