artsandculture.google.com - site is not usable

[emilio]

URL: https://artsandculture.google.com/experiment/AAHWrq360NcGbw?cp=e30.

Browser / Version: Firefox Mobile 85.0 Operating System: Android Tested Another Browser: Yes Chrome

Problem type: Site is not usable Description: Buttons or links not working Steps to Reproduce: Buttons at the bottom are obstructed by the dynamic toolbar. Cc @hiikezoe

View the screenshot

Browser Configuration

• gfx.webrender.all: false
• gfx.webrender.blob-images: true
• gfx.webrender.enabled: false
• image.mem.shared: true
• buildID: 20201210092800
• channel: nightly
• hasTouchScreen: true
• mixed active content blocked: false
• mixed passive content blocked: false
• tracking content blocked: false

View console log messages

From webcompat.com with ❤️

[emilio]

Also, if you disable the dynamic toolbar, the button at the bottom right doesn't seem to work.

[karlcow]

The content is inside an iframe.

<iframe
  src="//gacembed.withgoogle.com/blob-opera?axl=1"
  jsname="L5Fo6c"
  sandbox="allow-scripts allow-same-origin allow-downloads"
  allow="midi"
  class="KJxgNb"
  style="opacity: 1"
  frameborder="0"
></iframe>

with these rules

.KJxgNb {
    height: 100vh;
    height: -webkit-fill-available;
    max-width: 100vw;
    width: 100%;
    left: 0;
    position: absolute;
    top: 0;
}

and the iframe is contained in a div which has also

.kMjAyd {
    height: 100vh;
    height: -webkit-fill-available;
    max-width: 100vw;
    width: 100%;
}

They didn't put height: -moz-available, probably because of https://bugzilla.mozilla.org/show_bug.cgi?id=567039 Also in https://bugzilla.mozilla.org/show_bug.cgi?id=1495868#c6, I was saying

Instead of unprefixing -moz-available, It would be probably better to have an alias for -webkit-fill-available. And even before that it would be better to check if there is any attempt at using available as a term.

height: -moz-fit-content would not work either.

Modifying values there sends a

<div id="landscape-warning-overlay" style="display: flex;">
  <div>
    <div id="landscape-warning-desktop" style="display: none;">
      <div class="landscape-warning-icon">
        <span class="material-icons">fullscreen</span>
      </div>
      <div class="landscape-warning-text">Expand the height of your window to view this experiment</div>
    </div>
    <div id="landscape-warning-mobile" style="display: block;">
      <div class="landscape-warning-icon">
        <span class="material-icons">screen_rotation</span>
      </div>
      <div class="landscape-warning-text">This experiment is best viewed in portrait mode</div>
    </div>
  </div>
</div>

screen rotation warning which doesn't really make sense too, because it's based on the actual orientation on the detected window.innerHeight.

var dn = function () {
  window.innerHeight < 400
    ? (zt()
        ? ((document.getElementById("landscape-warning-desktop").style.display =
            "none"),
          (document.getElementById("landscape-warning-mobile").style.display =
            "block"))
        : ((document.getElementById("landscape-warning-mobile").style.display =
            "none"),
          (document.getElementById("landscape-warning-desktop").style.display =
            "block")),
      (document.getElementById("landscape-warning-overlay").style.display =
        "flex"))
    : ((document.getElementById("landscape-warning-overlay").style.display =
        "none"),
      window.scrollTo(0, 1));
};
window.addEventListener("resize", dn), dn();

Duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1495868 ?

[karlcow]

but also possibly contacting Google about it.

[emilio]

It's not defined how height: available should behave I think. I think height: 100% on the iframe might be what they really want?

[softvision-oana-arbuzov]

I could also reproduce it.

Tested with: Browser / Version: Firefox Nightly 201215 (🦎 85.0a1-20201213093323) Operating System: Samsung Galaxy S8 (Android 9) - 1440 x 2960 pixels, 18.5:9 ratio (~570 ppi density)