iOS format issue

[problemadder]

Does work great on MAC. 👍 Thanks for your great work! On iOS (iPhone and iPad) the cards are are not shown fully. Any ideas how to solve the issue? I have tried to change some values in the css with no success.

[TowelSniffer]

Good to know it works on MAC.

As for this issue on IOS, it looks like an easy fix. However, it will be hard for me to solve without a device to test with so I will need you to test for me if thats doable for you.

If you go to the iframe section of the CSS:

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

This section centers the content (though its a mystery as to why is doesn't on IOS). removing all that might make it render properly. If you haven't already, can you please try and see if that works. and let me know.

if it does work can you please try changing the values of the translate, ie:

  transform: translate(-50%, -0%);

[TowelSniffer]

if this works it will be easy enough to make some IOS specific CSS and I can update the template

[TowelSniffer]

actually before trying my earlier suggestion try changing the following in the body section:

body {
  margin: 0;
  height: 100%;
}

change height: 100%; to height: 100vh;. Sorry for the confusion

[problemadder]

thank you for the fast replay: 1 attempt: removing:

''' position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);'''

results in:

the front card is quite good, but lacks the black border on top. the back card is quite good, but is missing the bottom part with notation etc

2 attempt: "changing height: 100%; to height: 100vh;"

results in:

mentionable: on MAC it does still look good, even with the changes.

so i guess the iframe size and the border size are the last two thinks to fix. Perhaps you have further ideas

[TowelSniffer]

hmmm... annoying that didn't fix it.

body {
  margin: 0;
  height: 100vh;
}

I'm thinking maybe making this

.card {
  margin: 0;
  height: 100vh !important;
}

and also trying

.html {
  margin: 0;
  height: 100vh !important;
}

[problemadder]

the back card is quite good now, I test your other versions from above later in the evening

[TowelSniffer]

another approach would be to maximize the iframe container on IOS which should make it usable? so something like:

/* iOS */
.iphone iframe, .ipad iframe {
  height: 100vh !important;
  width: 100vw !important;
}

[TowelSniffer]

yeah ok, thanks for your help

[problemadder]

after some try and error i have a solution that works good for me (i guess its not "clean" at all), that is how it looks on ipad and iphone: thats how it looks on mac: for my solution i changed the back template to: <iframe id="analysisBoard" allowtransparency="true" class="solution"></iframe> and the CSS to:

body {
  margin: 0;
    height: 100vh;
}

.mac iframe {
  height: min(550px, 100vw);
  width: min(550px, 100vw);
  border: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #94e2d5;
    border-radius: 4px;
  box-shadow: 0px 0px 4px 0px #94e2d5;
}

/* iOS */
.iphone iframe, .ipad iframe {
  height: 90vh !important;
  width: 100vw !important;
}

.solution {
    width: min(400px)!important;
  height: min(520px, 100vw !important;
}

thanks again! I use your cards nearly every day for some chess anki reps from blunders (plenty 😅 ) from my games and tactics 👍

[TowelSniffer]

Brilliant, thanks for the help, and you're welcome. I will update the repository tomorrow morning with this solution. not clean, but functional is as good as can be hoped for unless I can get my hand on an IOS device (My brother has anki on Iphone, so maybe soon). anyway thanks again, and good luck with your chess.