www.y8.com vs Flash Player and CSS width/height mess Topic is solved

[UCyborg]

I figured out I can easily block Ruffle on this site so Flash Player is used with Flash games using the following filter in uBlock:

Code: Select all

||unpkg.com/@ruffle-rs/*$script

But I can't figure out how to make the game container the normal size. I can manually uncheck width and height in the huge selector that is visible when inspecting the embed element with SWF file.



But a permanent solution copying the huge selector to user CSS and unsetting width and height doesn't produce the same effect (eg.: height: unset !important;).

I've seen this mess with the stupid web app at work where I also unset width: 100% and height: 100% on the menu bar element in order for it to not go bonkers with size on Pale Moon. If I had access to source code or 99% people on this rotten planet weren't NPCs you can't reason with, those useless directives would be gone already.

Example URL on Y8: https://www.y8.com/games/crush_the_castle_2

[MasterSlenderTR]

There used to be an extension that forced all Ruffle content to use Flash Player but sadly it no longer works.

[UCyborg]

I'm not too concerned about Flash. I'm more concerned about that it should normally look like this:



While it looks like this:



It's not the first time I see this bullshit where CSS directives width/height set to 100% cause issues. I don't know if it's a bug in the browser or badly written CSS, but if former, resolution could be helpful in more places.

[adoxa]

It's another missing aspect-ratio issue; try this userstyle:

Code: Select all

@-moz-document domain("www.y8.com") {
  .item-direct-container {
    height: 100vh !important;
    width: calc((100vh - 95px) * 8/5) !important;
  }
}

That's intended for max-height (what I have, and appears to be what you have); for others wanting to try this where they get the full height:

Code: Select all

@-moz-document domain("www.y8.com") {
  .item-direct-container {
    height: calc((100vw - 345px) * 5/8) !important;
  }
}

[UCyborg]

That works great! Full height is intended appearance I think, judging by how it looks in Firefox with Ruffle.