From d0c7aa0dff7c49e0e5e0d5741997c31a4a7b3cfe Mon Sep 17 00:00:00 2001 From: Mike Welsh Date: Thu, 25 Mar 2021 15:39:19 -0700 Subject: [PATCH] web: Fix fullscreen sizing on Safari When Ruffle would go fullscreen on Safari, the content would often not fill the viewport because Ruffle's width/height CSS would override the :-webkit-full-screen CSS that Safari adds. Add our own :-webkit-full-screen CSS with !important to force 100% dimensions in fullscreen. --- web/packages/core/src/shadow-template.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/web/packages/core/src/shadow-template.ts b/web/packages/core/src/shadow-template.ts index a26918f21..df6e8d0e1 100644 --- a/web/packages/core/src/shadow-template.ts +++ b/web/packages/core/src/shadow-template.ts @@ -21,6 +21,14 @@ ruffleShadowTemplate.innerHTML = ` -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } + + /* Ruffle's width/height CSS interferes Safari fullscreen CSS. */ + /* Ensure that Safari's fullscreen mode actually fills the screen. */ + :host(:-webkit-full-screen) { + display: block; + width: 100% !important; + height: 100% !important; + } /* All of these use the dimensions specified by the embed. */ #container,