Recently I discovered an issue that Safari has with the writing-mode property. Safari handles vertical writing modes properly in most cases, but if applied to a button element, that element will revert to its initial value which is horizontal-tb.

Another user ran into a similar issue, but it wasn’t answered adequately in my opnion. I’m more curious if this is a documented at all. According to the CSS spec, writing mode “applies to all elements except table row groups, table column groups, table rows, [and] table columns…”, and these rules are supposed to be fully supported according to all sources I can find.

Does anyone know more about this issue or is able to add some clarity to the situation as to why this is happening?

:root {
  --writing-mode: vertical-rl;
}

.container {
  display: flex;
  gap: 12px;
}

button {
  height: auto;
  padding: 12px 8px;
  writing-mode: var(--writing-mode);
}

.test-div {
  outline: 1px solid red;
  padding: 12px 8px;
  writing-mode: var(--writing-mode) 
}

a {
  writing-mode: var(--writing-mode)
}

<div class="container">
  <button>Test</button>

  <div class='test-div'>Test</div>

  <a href="">Test</a>
</div>