Website looks different between Chrome and Safari

Question

i am programming an App with Angular. And the problem is, that my button is looking different in Safari on my iPhone then on my Simulated iPhone in Chrome.

in Chrome it looks like this:

And on my iPhone it looks like this:

I know that it could be a problem because i have not implemented anything webkit related, but i couldnt find something with webkit that could help me with this.

The Code is the Following:

#colorPicker button {
    border: none;
    border-radius: 30px;
    width: 100%;
    height: 86%;
    position: relative;
    top: -6%;
    overflow: hidden;
}
#colorPicker i {
    color: white;
}

#colorPicker #second {
    background-color: rgb(48, 209, 88);
}
#colorPicker #third {
    background-color: rgb(12, 50, 102);
}
#colorPicker #fourth {
    background-color: rgb(0, 0, 0);
}
#content {
    overflow: hidden;
}
.resetSettings {
    border: none;
    padding: none;
    margin: none;
    border-radius: 25px;
    color: white;
}

#activeButton {
    color: white;
    background-color: rgb(88, 86, 214);
    width: 100%;
    height: 120%;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border: none;
    padding: none;
    margin: none;
}
#settingsDatenschutz {
    width: 80%;
    border: none;
    background-color: transparent;
    padding: none;
    margin: none;
    margin-right: 10%;
    margin-left: 10%;
    border-radius: 25px;
    font-family: Arial, Helvetica, sans-serif;
}
#settingsDatenschutz p {
    font-size: 18pt !important;
    font-family: Arial, Helvetica, sans-serif !important;
}
#settingsDatenschutz i {
    font-size: 18pt !important;
}
#datenschutz {
    margin: none;
    border: none;
    padding: none;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 102;
    background-color:  rgb(44, 44, 46);
    overflow-y: scroll;
}
#datenschutz button {
    width: 100%;
    bottom: 0;
    position: fixed;
    font-size: 20pt;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<style>
    #content {
        background-color: white;
        color: black;
        border: none;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        margin: 5%;
        margin-top: 2%;
        width: 90%;
        position: relative;
        top: 12%;
        left: 0;
        right: 0;
        overflow: scroll;
        padding: 15px;
        font-size: 20pt;
    }
    #content i {
        font-size: 28pt;
        padding-top: 5px;
    }
    #content p {
        display: inline;
    }

    #view {
        z-index: 2;
        position: relative;
        top: 0;
        margin: none;
        width: 100%;
        height: 100%;
    }


    #colorPicker {
        width: 90%;
        height: 90%;
        margin: 5%;
        margin-top: 20%;
    }
    /* #colorPicker button {
        border: none;
        border-radius: 30px;
        width: 100%;
        position: relative;
        top: -6%;
    }
    #colorPicker i {
        color: white;
    }
    #colorPicker #default {
        background-color: rgb(10, 132, 255);
    }
    
    #colorPicker #second {
        background-color: rgb(48, 209, 88);
    }
    #colorPicker #third {
        background-color: rgb(12, 50, 102);
    }
    #colorPicker #fourth {
        background-color: rgb(0, 0, 0);
    } */
</style>

<div id="view">
    <div id="content">
        <br>
        <div id="colorPickerButtonView">
            <div class="row">
                <div id="firstMain" class="col-6">
                    <div class="activeColorFromColorPicker" id="colorPicker">
                        <button class="primaryColorDefault" alt="Hellblauer Hintergrund, weiße Schrift" onclick="colorPicker(0)" id="default">
                            <br>
                            <i class="fab fa-accessible-icon"></i>
                            <br>
                            <div id="activeButton">
                                <p>Active!</p>
                            </div>
                        </button>
                    </div>
                </div>
                <div id="secondMain" class="col-6">
                    <div id="colorPicker">
                        <button alt="Helglgrüner Hintergrund, weiße Schrift" onclick="colorPicker(1)" id="second">
                            <br>
                            <i class="fab fa-accessible-icon"></i>
                            <br>
                            <div id="activeButton">
                                <p>Active!</p>
                            </div>
                        </button>
                    </div>
                </div>
                
                <div id="thirdMain" class="col-6">
                    <div id="colorPicker">
                        <button alt="Dunkelblauer Hintergrund, weiße Schrift" onclick="colorPicker(2)" id="third">
                            <br>
                            <i class="fab fa-accessible-icon"></i>
                            <br>
                            <div id="activeButton">
                                <p>Active!</p>
                            </div>
                        </button>
                    </div>
                </div>
                <div id="fourthMain" class="col-6">
                    <div id="colorPicker">
                        <button alt="Schwarzer Hintergrund, weiße Schrift" onclick="colorPicker(3)" id="fourth">
                            <br>
                            <i class="fab fa-accessible-icon"></i>
                            <br>
                            <div id="activeButton">
                                <p>Active!</p>
                            </div>
                        </button>
                    </div>
                </div>
                
            </div>
        </div>

    </div>
</div>


<router-outlet></router-outlet>

Can you include more of the relevant CSS, we don’t know what the active button is 100% width of. Also the minimal HTML so we can reproduce the problem in a Stackoverflow snippet. thanks. — A Haworth, Dec 15 '20 at 17:10
Please put up a working snippet as there isn't enough in the given code to find out how the dimensions are set. — A Haworth, Dec 16 '20 at 09:04
Thats the exact error. In Chrome the Snippet looks like i want it to look, but on my iPhone the snippet looks different. — yama_HD, Dec 16 '20 at 10:14

score 1 · Accepted Answer · answered Dec 16 '20 at 17:08

The given code has several errors in the HTML such as multiple instances of the same id.

The error that is most likely to be confusing browsers as they won't necessarily know how you want the code parsed is having a div (and also a p) element within a button element. This is not allowed in the spec. See for example div not allowed as child element of button

Run your code through the W3C validator to get the full details.

Then the best thing to do next is probably to change the button elements for div elements with class="button", change the CSS which refers to button to .button

And check and correct any other validation errors.

Then if the problem is not cured we are at least on solid ground for having a further look - particularly at the implementations of class="row" when an inner div has a height larger than the container such as you have in this example

Ah I know what you mean. I removed the div and everything else in the Button except the
but its still the same. — yama_HD, Dec 17 '20 at 14:11
p also isn’t allowed in a button, though I’m not sure that is your basic problem. — A Haworth, Dec 17 '20 at 19:18

Website looks different between Chrome and Safari

1 Answers1