javascripthtmlcsssafari

Safari for Desktop ignores CSS

I'm currently trying to fix some CSS/(HTML/JS?) errors on my website for Safari, specifically for the desktop version. Since I don't have Safari for desktop myself, I'm using Browser Stack to view my site on Safari. The problem is that both buttons on my page have a background, but only one has the focused class (which should add the background and is somehow partially ignored on Safari, as it wasn't added sometimes, and I had to manually add it). Does anyone know why this is happening? It seems so simple, just adding a class that adds a background color.

CSS

@media (max-width: 1000px) {
  .container {
    width: 90%;
  }
}

@media (max-height: 600px) {
  .wrapper {
    height: 70%;
  }
}

p {
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #121212;
}

/* Portfolio Header */

#header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-family: "Poppins-ExtraBold", sans-serif;
  font-weight: 700;
  font-size: 60px;
  margin-bottom: 10px;
  background-image: -o-linear-gradient(
          45deg,
          #4158d0 -10%,
          #c850c0 40%,
          #ffb116 100%
  );
  background-image: linear-gradient(
          45deg,
          #4158d0 -10%,
          #c850c0 40%,
          #ffb116 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-align: center;
}

#subtitle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-family: "Poppins-Bold", sans-serif;
  -ms-grid-row-align: center;
  align-self: center;
  font-size: 30px;
  margin-bottom: 75px;
  color: white;
}

/* Container */

.flex-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
}

.container {
  background-color: #282c34;
  border-radius: 25px;
  text-align: center;
  width: 750px;
}

/* Tabs */

/* Style the tab */
.tab {
  overflow: hidden;
  border: 3px solid #1c1b1b;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  font-weight: 700;
  font-size: 26px;
  font-family: Consolas, monospace;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 18px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  color: black;
}

/* reset pre tag */
pre {
  margin: 0;
  padding: 0;
}

.tab button:focus {
  background-color: rgb(197, 197, 197);
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: rgb(197, 197, 197);
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: rgb(197, 197, 197);
}

/* Style the tab content */
.tabcontent {
  display: none;
  height: 396px;
  font-size: 22px;
  border: 3px solid #121212;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  font-family: Consolas, monospace;
  text-align: left;
  padding: 6px 12px;
  border-top: none;
}

.console {
  padding: 10px 22px 2px 22px;
}

#Console,
#Code {
  position: relative;
}

/* adjusting stack overflow style */
#Code pre code.hljs {
  padding: 1em 1em 0 1em;
}

/* Gets added whenever a tab button is pressed */

.focused {
  background-color: rgb(197, 197, 197);
}

/* Run Code Button */

.run {
  background-color: rgb(44, 156, 0);
}

.stop {
  background-color: rgb(204, 2, 2);
}

.stop .button__icon {
  width: 28px;
}

.button {
  /* position: absolute; */
  /* bottom: 8%; */
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 130px;
  height: 40px;
  margin-left: 1.5%;
  border: none;
  outline: none;
  border-radius: 5px;
  overflow: hidden;
  font-family: "Arial", sans-serif;
  font-size: 24px;
  font-weight: 500;
  cursor: pointer;
  position: absolute;
  bottom: 25px;
  left: 12px;
}

.run:hover {
  background-color: rgb(40, 139, 0);
}

.run:active {
  background-color: rgb(40, 139, 0);
}

.stop:hover {
  background-color: rgb(187, 7, 7);
}

.stop:active {
  background-color: rgb(187, 7, 7);
}

.button__text,
.button__icon {
  font-size: 24px;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #fff;
  height: 100%;
}

.button__text {
  padding: 0 20px 0 10px;
  width: 35px;
}

.button__icon {
  padding: 0 18px 0 12px;
  width: 34px;
  font-size: 5em;
  background: rgba(0, 0, 0, 0.08);
}

/* Text */

.textHeadline {
  font-weight: 1000;
  font-size: 24px;
  color: rgb(255, 255, 255);
  font-family: "Consolas", sans-serif;
}

.text {
  font-size: 18px;
  color: rgb(255, 255, 255);
  font-family: "Poppins-Regular", sans-serif;
}

/* Social Media Icons Container */

.social-profiles {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  /* text-align: center; */
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/* Social Media Icons */

.icons {
  color: white;
  margin-top: 10px;
  padding: 10px;
  -webkit-transition: color 0.2s;
  -o-transition: color 0.2s;
  transition: color 0.2s;
  text-decoration: none;
  font-size: 4em;
}

.icons:hover {
  color: #b6b6b6;
}

/* Href */

#link {
  color: #aaa;
}

JS

// Ein Großteil des Scripts habe ich von: https://www.w3schools.com/howto/howto_js_tabs.asp

function onLoadFunctions(){
    document.getElementById("codeBtn").classList.add('focused');
    document.getElementsByClassName("run")[0].addEventListener("click", function (){
        openTab("Console")
    })
    document.getElementsByClassName("stop")[0].addEventListener("click", function (){
        openTab("Code")
    })
    document.getElementById("codeBtn").addEventListener("click", function (){
        openTab("Code")
    })
    document.getElementById("consoleBtn").addEventListener("click", function (){
        openTab("Console")
    })
}
window.onload = onLoadFunctions;

function openTab(tabName) {
    event.preventDefault();

    const codeBtn = document.getElementById("codeBtn");
    const consoleBtn = document.getElementById("consoleBtn");
    const tabContent = document.getElementsByClassName("tabcontent");
    const tabLinks = document.getElementsByClassName("tablinks");

    // Reset all tabs and buttons
    codeBtn.classList.remove('focused');
    codeBtn.offsetWidth;
    consoleBtn.classList.remove('focused');
    consoleBtn.offsetWidth;

    for (let i = 0; i < tabContent.length; i++) {
        tabContent[i].style.display = "none";
    }

    for (let i = 0; i < tabLinks.length; i++) {
        tabLinks[i].className = tabLinks[i].className.replace(" active", "");
    }

    // Show the selected tab and add "active" class to the button
    document.getElementById(tabName).style.display = "block";
    let button;
    if (tabName === "Code") {
        button = codeBtn;
    } else {
        button = consoleBtn;
    }
    button.classList.add('focused');
    void button.offsetWidth;
}

HTML

<!DOCTYPE html>

<html lang="de">

<head>
    <meta charset="UTF-8"/>
    <title>Gabriel | Homepage</title>
    <link rel="icon" href="assets/logo-github.svg">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/atom-one-dark.min.css">
    <script src="script.js"></script>
</head>

<body>

    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
    <script>hljs.highlightAll();</script>
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

    <div class="flex-container">

        <div class="wrapper">

            <!--Ueberschrift-->

            <h1 id="header">Gabriel | Portfolio</h1>
            <p id="subtitle">Mein Portfolio in einem Code/Console-Style</p>

            <!--Ueberschrift Ende-->

            <!--Container Start; Tab Buttons-->

            <div class="container">

                <div class="tab">
                    <button id="codeBtn" class="tablinks">Code</button>
                    <button id="consoleBtn" class="tablinks">Console</button>
                </div>

                <!--Tab Buttons Ende-->

                <!--Java Code und 'Run Code' Button-->

                <div id="Code" class="tabcontent" style="display: block;">
                    <pre><code class="java">public class Main{
    
public static void main(String[] args) {
    
    Person gabriel = new Person();
    System.out.println(gabriel.toString());

    // TODO: Implement spaghetti code method 🍝
    
    }
}
                    </code><br>&nbsp;</pre>
                    <button type="button" class="button run">
                        <span class="button__text">Run</span>
                        <span class="button__icon">
                            <ion-icon name="caret-forward-outline"></ion-icon>
                        </span>
                    </button>
                </div>

                <!--Java Code und 'Run Code' Button Ende-->

                <!--Konsole Output-->

                <div id="Console" class="tabcontent console">
                    <p>
                        <span class="textHeadline">📌About Me</span>
                        <br><span class="text">
                            Ich bin Java Backend Entwickler, möchte mich in Zukunft jedoch vor allem auf
                            C++ und Rust konzentrieren.
                        </span>
                    </p>
                    <br>
                    <p>
                        <span class="textHeadline">📌Projekte</span>
                        <span class="text">
                            <br>Alle meine Projekte sind auf meinem
                            <a id="link" href="https://github.com/github-gabriel" target="blank">GitHub</a>
                            auffindbar.
                        </span>
                    </p>
                    <button type="button" class="button stop">
                        <span class="button__text">Stop</span>
                        <span class="button__icon">
                          <ion-icon name="stop"></ion-icon>
                        </span>
                    </button>
                </div>
            </div>

            <!--Konsole Output Ende-->

            <!--Social Media Links-->

            <div class="social-profiles">
                <a class="icons" href="https://github.com/github-gabriel" target="blank">
                    <span title="GitHub">
                        <ion-icon name="logo-github" style="pointer-events:none"></ion-icon>
                    </span>
                </a>
                <!--https://mail.google.com/mail/u/0/?fs=1&to=gabriel.haberlach@gmail.com&tf=cm-->
                <a class="icons" href="mailto:gabriel.haberlach@gmail.com" target="blank">
                    <span title="E-Mail">
                        <ion-icon name="mail-outline" style="pointer-events:none"></ion-icon>
                    </span>
                </a>
            </div>

            <!--Social Media Links Ende-->

        </div>

    </div>

</body>

</html>

Here is a screenshot of the problem: enter image description here

As you can see, one class has the "focused" class appended to it, while the other one doesn't have it, but they still both have the background color, even though only the button with the "focused" class should have the background color.

Exact expected behaviour

I would expect for the buttons to look like this for all browser (this is a screenshot from chrome, which is chromiumbased)

enter image description here

As you can see the button has the same background color as the top bar

What I've tried

I've tried using Vendor Prefixes with Autoprefixer CSS and also

void button.offsetWidth;

in my script, to redraw after class changes but nothing works. This behaviour seems very weird to me, maybe a bug in Safari?

Here is the Website for testing: https://dev.gabriel-haberlach.de/

And this is the repo of the Website: https://github.com/github-gabriel/dev-portfolio/tree/master

Solution

  • It is default user agent stylesheet on Safari. Try including a CSS reset, such as the meyerweb CSS reset or normalize.css, to remove those defaults. Google "CSS reset vs normalize" to see the differences.

    Check it out in this answer here: https://stackoverflow.com/a/12582723/4053359

    enter image description here