bug? missing feature? on sailfish os browser [answered]

TL;DR
https://github.com/blakevanlan/KingdomCreator/issues/5

This may be due to this incompatibility:
https://bugzilla.mozilla.org/show_bug.cgi?id=1256980
The transforms happen, but the z-index brings the back-face to the top.

If I add this userstyle:

div {z-index:auto!important}

then it shows the front-faces. (I'm using the Stylus addon in Firefox here, but it could be done with userContent.css in the SFOS browser.)

I don't know if the site now works correctly - I don't know how it's meant to behave. When is it suposed to show the backs of the cards?

Added after further investigation:

I'm not now convinced this bug applies. According to the bug description z-index does apply to 'positioned' elements, and an element is said to be positioned if its 'position' property has a value other than 'static'.

The computed style of one of these card backs as initially displayed is

HTML > BODY > DIV.content > DIV.main > DIV#cards > DIV.card-wrap selected > DIV.flipper show-front > DIV.card-back
position: absolute
backface-visibility: hidden
margin-*: 0px
transform: none
transform-style: flat
transition-duration: 0s
transition-property: all
z-index: 2

That doesn't change after the transforms caused by 'replace'. So the element is positioned and the z-index applies - which puts it on top.

If this is correct it may still be a gecko bug but not that one. Or there's a bug in the site code. Or the bug may be in webkit and its derivatives - and Edge too!

There is at least one other z-index on the site so a better userstyle is

div.card-back {z-index:auto!important}

I amended my earlier userstyle below. Has anybody who knows how this game works tried it?

Added in answer to comment:
The Stylus addon allows you to specify which site a userstyle applies to, but if you can't use an addon you can specify it like this:

@-moz-document url-prefix(https://dominionrandomizer.com/)
{
/* Test: suppress effect of z-index on cards */
div.card-back {z-index:auto!important}
}

Note: This style was only to diagnose the problem. I don't know what other effects might result from knocking out z-index: it presumably serves some purpose.

Create a directory chrome in your SFOS browser profile and add the style into a text file userContent.css. I would do this on a PC and then copy the file across, but on the Jolla you could do:

mkdir .mozilla/mozembed/chrome/
nano .mozilla/mozembed/chrome/userContent.css

You can use userContent.css in all gecko browsers, BTW. On Jolla/Alien put it in
/opt/alien/data/data/org.mozilla.firefox/files/mozilla/xxxxxxx.default/chrome/userContent.css
But Stylus works on Android and has the advantage that you can turn styles on and off easily.