Q:

Why does upright text orientation not work in Safari or Edge?

From what I can tell, text-orientation:upright has no effect in either Safari or Edge, though it works fine in Chrome and Firefox. I can find no mention of this issue anywhere at all. The only caveat listed on https://caniuse.com/#feat=css-text-orientation is that Safari requires the -webkit- prefix but I've provided that and it still doesn't work. Here's a fiddle: https://jsfiddle.net/tn3bdf52/
My only access to Safari is on an iPad but in Edge's dev tools the property has a red underline as though it's invalid. The writing-mode:vertical-lr property has a black line-through like it's being overridden but IDK by what. It's still working. I tried changing the value to tb-lr but it made no difference.

A:

You did a little mistake with the prefix -webkit-. -webkit-text-orientation is the correct rule tested on Mac with Safari. Please try.
P.S. In Microsoft Edge v.80.0.361 text-orientation is also works

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  writing-mode: vertical-lr;
  -webkit-text-orientation: upright;
  text-orientation: upright;
}

li {
  padding: 1em .5em;
}
<html>
<body>
  <ul class="">
    <li class="first"><a href="/variis/opa">Opa</a></li>
    <li><a href="/variis/fire-tower">Fire Tower</a></li>
    <li class="last"><a href="/variis/dandelion-on-the-wind">Dandelion on the Wind</a>
    </li>
  </ul>
</body>
</html>

