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.
This commit is contained in:
parent
ce72277a07
commit
d0c7aa0dff
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue