My table includes a td element that serves as a toggle switch, transitioning between 3 states flawlessly in Chrome. However, I am facing issues with its functionality in Safari and seek assistance in rectifying the issue to ensure cross-browser compatibility.
Attached are both an image and the relevant code snippet.
Grateful for any insights or solutions shared.
M.
highlight {
background-color: #86C440;
color: white;
}
th {
font-size: 30px;
}
tr {
text-align: left;
}
td {
font-size: 20px;
background-color: #d4d6d3;
cursor: pointer;
}
.center {
margin-left: auto;
margin-right: auto;
}
tr {
position:relative;
transform:scale(1,1);
}
td.last{
position:fixed;
border: 5px solid #d4d6d3;
background-color: #4eafef;
left: -46px;
top: -46px;
height: 7px;
width: 7px;
line-height: 7px;
cursor: pointer;
} <html>
<body>
<div id="switch">1</div>
<br><br><br><br><br><br><br>
<style>
table {border-collapse: collapse; border: 5px solid white; padding: 5px;}
table td {text-align: center; color: black; border: 5px solid white; padding: 10px; height: 66px; width: 66px;}
</style>
<table class="center">
<tr>
<td>1</td>
<td>2</td>
<td id="toggle" class="last" onclick="toggle1()"></td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
<script>
function toggle1() {
var key = document.getElementById("switch").innerHTML;
if (key == 1) {
document.getElementById("toggle").style.backgroundColor = "white";
document.getElementById("toggle").style.backgroundImage = "url('')";
document.getElementById("toggle").style.borderStyle = "solid";
document.getElementById("toggle").style.borderColor = "#d4d6d3";
document.getElementById("toggle").style.borderWidth = "5px";
document.getElementById("switch").innerHTML = 2;
//console.log("toggle clicked 1st time!");
} else if (key == 2) {
document.getElementById("toggle").style.backgroundColor = "#a370f0";
document.getElementById("toggle").style.backgroundImage = "url('')";
document.getElementById("toggle").style.borderStyle = "solid";
document.getElementById("toggle").style.borderColor = "#d4d6d3";
document.getElementById("toggle").style.borderWidth = "5px";
document.getElementById("switch").innerHTML = 3;
//console.log("toggle clicked 2nd time!");
} else if (key == 3) {
document.getElementById("toggle").style.backgroundColor = "#4eafef";
document.getElementById("toggle").style.backgroundImage = "url('')";
document.getElementById("toggle").style.borderStyle = "solid";
document.getElementById("toggle").style.borderColor = "#d4d6d3";
document.getElementById("toggle").style.borderWidth = "5px";
document.getElementById("switch").innerHTML = 1;
//console.log("toggle clicked 3rd time!");
}
}
</script>
</html>