I have a div with this css

#con {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
row-gap: 8px;
box-sizing: border-box;
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100%;
}

and it contains this div

#question {
grid-column: 1 / -1;
grid-row: 1 / -1;
align-self: end;
justify-self: start;
}

'question' div should appear in the bottom left corner of 'con' and it
does everywhere in my testing (Windows Chrome, Windows Firefox, Android
phone, Mac Safari) except on an ipad!

On an ipad it appears in the *top* left corner of 'con'. I've tried lots
of edits to the CSS but I can't get 'question' to honour the align-self setting.

What can I do to get this to work?

Andrew Poulos

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

Andrew Poulos <ap_prog@hotmail.com> wrote on 24 Dec 2020 in comp.infosystems.www.authoring.stylesheets:

On an ipad it appears in the *top* left corner of 'con'. I've tried lots
of edits to the CSS but I can't get 'question' to honour the align-self setting.

What can I do to get this to work?

Specify the browser[s].

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

On 25/12/2020 9:53 am, Evertjan. wrote:

Andrew Poulos <ap_prog@hotmail.com> wrote on 24 Dec 2020 in comp.infosystems.www.authoring.stylesheets:

On an ipad it appears in the *top* left corner of 'con'. I've tried lots
of edits to the CSS but I can't get 'question' to honour the align-self
setting.

What can I do to get this to work?

Specify the browser[s].

On an ipad, it fails with Safari (on an ipad, it works with Chrome and Firefox).

Andrew Poulos

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

On 25/12/2020 1:21 pm, Andrew Poulos wrote:

On 25/12/2020 9:53 am, Evertjan. wrote:

Andrew Poulos <ap_prog@hotmail.com> wrote on 24 Dec 2020 in
comp.infosystems.www.authoring.stylesheets:

On an ipad it appears in the *top* left corner of 'con'. I've tried lots >>> of edits to the CSS but I can't get 'question' to honour the align-self
setting.

What can I do to get this to work?

Specify the browser[s].

On an ipad, it fails with Safari (on an ipad, it works with Chrome and Firefox).

Further to this, it's interesting that 100vh is interpreted differently
on an ipad between Safari and Chrome or Firefox. To get Safari to behave
I needed to use this code:

let vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); document.body.style.height = 'calc(var(--vh, 1vh) * 100)';


Andrew Poulos

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)