CSS opacity ignored on Edge Mobile, but honored on other mobile and desktop browsers

Question

The image is from another domain, but I can't find anything to indicate that that is the issue. I am going for an effect where it looks like an image is a watermark on parchment behind the text, and I can't directly alter the watermark image so it has to be done in CSS. The only browser that doesn't work is Microft's Edge on Mobile. Chrome mobile, and all desktop browsers I tried worked just fine.

@font-face {
    font-family: 'Domestic Manners';
    src: url('domestic-manners.regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* {
    font-family: "Domestic Manners";
    position: relative;
}

p {
    font-size:120%;
    text-indent: 2em;
    padding: 0;
    margin: 0;
    clear: both;
    /* float:left; */
}

#main {
    margin:auto;
    max-width: 700px;
    padding:3em;
    background-image: url(/img/parchment-full.jpg);
    border-radius:5px;
    z-index: 0;
    overflow: hidden;
}

.images img {
    height: 60;
    /* filter: grayscale(1) sepia(1) brightness(1.3); */
    margin: 0;
    padding: 0;
    float: left;
    /* To generate the dice images you can use the following js and then right click and save as the image */
    /* for (var i =10; i>=0; i--){place_dice("d10", i);} */
}

.creature {
    position: absolute;
    left: 50%;
    z-index:-1;
    transform: translate(-50%, 0);
    opacity:25%;
}

I removed the CSS that I'm 99% sure doesn't apply to make it easier to understand. The HTML this is applying to is bellow. Note that the image tag is within the p.

<div id="main">
  <h1>Title</h1>
  <p><img class="creature" src="https://image-from-a-different-origin"/>
    Lorem Ipsum...
  </p>
</div>

Answer 1

I think the issue is caused by that Edge mobile doesn't have support for percentage opacity values. In this link, we can see that many browsers don't support percentage opacity values.

You could change

opacity:25%;

into

opacity: calc(25 / 100);

or

opacity: 0.25;

which have the same effect. Then it can work well on Edge mobile.