Buttons haben Rahmen nach installation als PWA

[eMKa]

Erstmal vielen Dank für die Antworten.

Ja, hab Media Querys in Verwendung,.. allerdings bis jetzt erst den portrait Mode fürs Iphone Designed, weil mit die Funktion erstmal wichtiger ist.

Ich häng auch mal css an.

Was hald echt komisch ist, wenn ich die Seite auf dem Handy im Safari öffne, haben die buttons keine Rahmen. Sobald ich die Webseite auf dem Desktop speichere, sind da Rahmen ;(

/*#########################################################################*/
/*################################   MAIN   ###############################*/
/*#########################################################################*/

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0px;
    overflow: hidden;
}

.grid-box{
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows:  15% 20% 20% 20% 25%;
    grid-template-areas: 
        "header header  header  header  header"
        "main   main    main    main    main  "
        "main   main    main    main    main  "
        "main   main    main    main    main  "
        "main   main    main    main    main  "
}
/* Header */
.box-1{
    background: white;
    grid-area: header;
    padding: 5px;
}
/* Kalender */
.box-2{
    margin: 5px;
    background: white;
    grid-area: main;
    vertical-align: bottom;
    overflow: hidden;
}

.box-2 .container .card{
    width: 100%;
    
}

.form-inline{
    margin: 0 auto;
    margin-top: 2px;
    padding: auto;
}
.btn {
    margin: 5px 0 0 10px;
}
/* Notizen */
.box-3{
    grid-area: foto;
    background-size: cover;
}
/* Footer */
.box-4{
    background: white;
    grid-area: footer;
    text-align: center;
}

/*#########################################################################*/
/*################################ KALENDER  ##############################*/
/*#########################################################################*/

table{
    width: 100%;
    height: 10%;

}
table, thead, tr,tbody, td, th{
    border:  solid black;
    border-collapse: collapse;
    padding: 0.4em;
    text-align: center;	
    font-family: 'Maven Pro', sans-serif;
    font-weight: bolder;
}
th{
    background-color: #e7e5e7;
    margin: 0 0 0 0;
    width: calc(100vw/7);
}



button{
    width: 25%;
    font-size: 450%;
    background-color: white;
    border: solid;
    float: left;
    margin-left: -1px;
    padding: 0;
    line-height: 0.8;
}

#schicht{
    margin: 15px 25px 0 25px;
    width: 35vw;
    float: left;
    font-family: 'Maven Pro', sans-serif; 
    font-weight: bolder;
}

#schicht p{
    text-align: center;
    margin-top: -5px;
}

#schicht .buttonS{
    border: none;
    width: 11vw;
    margin-top: -5px;
    margin-left: 2px;
    font-size: 220%;
}

#buttonSa{
    border: none;
    color: #f9c0ce;
}

#buttonSb{
    border: none;
    color: #c1f3cf;
}

#buttonSc{
    border: none;
    color: #91d1fc;
}

h1{
    font-family: 'Maven Pro', sans-serif; 
    text-align: left;
    font-weight: 1100;
    font-size: 425%;
    letter-spacing: 1px;
    font-stretch: expanded;
    line-height: 0.8;
    margin-top: 12px;
    margin-left: -2px;
}

h2{
    font-family: 'Maven Pro', sans-serif;
    font-size: 278%;
    margin-top: -8px;
    margin-bottom: 15px;
}
.bg-info{
    font-family: 'Bowlby One SC', cursive; 
    background-image: url("../images/heuteQuer.png");
    background-size: cover;
    margin-top: 25px;
}
.schichtA{
    font-weight: bolder;
    background-color: #f9c0ce;
    color: black;
}
.schichtB{
    font-weight: bolder;
    background-color: #c1f3cf;
    color: black;
}
.schichtC{
    font-weight: bolder;
    background-color: #91d1fc;
    color: black;
}

/*#########################################################################*/
/*################################ PORTRAIT  ##############################*/
/*#########################################################################*/

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) 
    and (orientation : portrait){  

tr{
    height: calc(100vw/7);
}
        
.grid-box{
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows:  6% 10% 14% 10% 14% 6% 10% 10% 16% 4%;
    grid-template-areas: 
        "header header  header  header  header"
        "header header  header  header  header"
        "main   main    main    main    main  "
        "main   main    main    main    main  "
        "main   main    main    main    main  "
        "main   main    main    main    main  "
        "main   main    main    main    main  "
        "main   main    main    main    main  "
        "notes  notes   notes   notes   notes "
        "footer footer  footer  footer  footer"
}
        
        .form-inline{
            margin: 5px auto;
        }
        
        .btn {
            margin-left: 0px;
            margin-top: 15px;
        }
        
        .bg-info{
            font-weight: bolder; 
            background-image: url("../images/heute.png");
            background-size: cover;
        }
        /* Foto*/
        .box-3{
            background: white;
            background-size: cover;
            margin: 5px;
            border: solid;
            grid-area: notes;
        }
        /* Footer */
        .box-4{
            background: white;
            grid-area: footer;
            font-size: 70%;
            color: gray;
        }
        
        #buttonSa{
            border: none;
            color: #f9c0ce;
        }

        #buttonSb{
            border: none;
            color: #c1f3cf;
        }

        #buttonSc{
            border: none;
            color: #91d1fc;
        }
}

/*#########################################################################*/
/*###############################  LANDSCPAE  #############################*/
/*#########################################################################*/

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) 
    and (orientation : landscape){       

.grid-box{
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows:  10% 10% 10% 10% 15% 5% 10% 10% 10% 10%;
    grid-template-areas: 
        "header header  header  header  header"
        "header header  header  header  header"
        "main   main    main    main    main  "
        "main   main    main    main    main  "
        "main   main    main    main    main  "
        "main   main    main    main    main  "
        "main   main    main    main    main  "
        "main   main    main    main    main  "
        "main   main    main    main    main  "
        "footer footer  footer  footer  footer"
}
        h3{
            margin -25px;
            font-family: 'Open Sans', sans-serif;
        }
        .card .card-header #monthAndYear{
            margin-top: -35px;
        }
        .card{
            height: 100%;
        }
        .form-inline{
            margin: 20px auto;
        }
        
        tr{
            height: calc(100vw/28);
        }
        .bg-info{
            font-weight: bolder; 
            background-image: url("../images/heute.png");
            background-size: cover;
        }
        /* Foto*/
        .box-3{
            visibility: collapse;
        }
        /* Footer */
        .box-4{
            visibility: collapse;
        }
}

Das Problem betrifft die 3 Buttons #buttonSa #buttonSb und #buttonSc