Table toggle not working in Safari... works fine in Chrome

Question

I have a simple table that also has a td that is offset and acts as a toggle. It switches between 3 states and is working fine in Chrome. Can anyone help me and explain why it does not currently work in Safari, I have not tested this in other browsers yet, but would like solution to work in other browsers too.

Pic and code attached.

Thank you for any help and solutions.

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;
}

user_10867454 · Answer

There are a few problems which seem to result in Chrome/Edge behaving differently from Safari.

There is a style declaration within the body rather than the head element. This is picked up by an HTML validator as illegal HTML. The snippet below moves it to the head.

There is a setting for tr elements which implements a transform. This seems to encourage Chrome to position the fixed element relative to the table start rather than relative to the viewport. I don't have a full explanation for this other than to note that any sort of transform seems to result in this behaviour and that any transform will create a new stacking context.

There is a 3rd cell in the first row but not in the subsequent rows. This is picked up as a warning by the validator. I do not know how the table's layout is supposed to look in this circumstance, but of course the result is complicated by the fixed setting which takes the 3rd cell out of the flow visually.

This snippet takes the 3rd cell out and puts a button before the table instead. Together with the other changes Safari and Chrome/Edge now behave the same, with Safari doing the expected behavior on border-collapse.

The button's position needs working on - perhaps the button plus table should be in a container which gets positioned? It depends on exactly what is required in terms of fixing its position.

Table toggle not working in Safari... works fine in Chrome

1 Answers