2 years and still previews rendering bug in Firefox. Is anybody home?

[alitcons01 4]

I have been a paid "Premiere" user for almost two years. Time passes but at Emby some rid*culous and annoying bugs never seem to get fixed, probably the dev team has other thoughts or maybe they don't have the capabilities, or maybe we are only 3 users.

The interface display in Firefox and ALL its derivatives, any section of any theme of any version of the last few years for any PC OS, (in other words the "gecko" HTML engine), suffers from a preview/poster/banner/icon/picon sizing problem that does not appear on Chromium/Chrome family.
I attach some BEFORE/AFTER screenshots to clarify how simply scrolling the page up and down or the carousels right/left randomly produces these deformations.

IMHO it's clearly about sloppiness in the interface code writing, how images should fill their tiles.
Probably the developers just use Chrome/Chromium/Vivaldi/Opera/Brave and they think the rest of the world does too but Firefox & Sons clearly need some different approach in CSS.

I am therefore asking for an effective fix that does not involve workarounds like "disable FF hardware acceleration" (I need Emby to watch videos and without hardware acceleration the result is stuttering and tearing), "why don't you change your browser" or "resize your images 3972x6371 - 263 dpi", I have thousands and no time, I expect that a software I'm paying for, just works.
Thanks.

[Abobader 3464]

Hello alitcons01,

** This is an auto reply **

Please wait for someone from staff support or our members to reply to you.

It's recommended to provide more info, as it explain in this thread:

Thank you.

Emby Team

[visproduction 315]

My guess is that the dark thumbnails are not a standard aspect ratio.  The top examples from I Miei Media take 16:9 wide thumbnails to fit this menu type.  CSS style for these images include two style commands.  The bottom runs first, then the top from another style sheet.  There is a delay for each style to activate.  Some browsers also have issues with resolving some css sequential style commands.  This is why the graphic aspect ratio and file size needs to fit correctly and not have to be adjusted by CSS style settings or by the browser.  On a profession live product website, if the graphics are not setup correctly then the graphic designs errors valid bugs.  The graphic artist would be tasked to fix them before any changes would be done to the Emby code handling the css styles.
 

.coveredImage-noScale {
    background-size: cover;
    object-fit: cover;
}
... 
@supports (aspect-ratio: 16 / 9) {
    .cardPadder-backdrop {
        padding-bottom:0!important;
        aspect-ratio: 16/9;
        contain: strict
    }

The lower example has similar style commands, this time to fit into a poster size   If the original images are some other size, probably 4:3, then the CSS styles need to first display images and then rerender them to fit-contain CSS style option, further down the style sheet.  This does not happen immediately and depends on the hardware speed, network connection, what other images are being loaded on the page and especially if the thumbnail graphics are quite a lot larger than the display on the page.  This is already possible 3 issues that are graphics design choice failures for websites. 

To be clear - 1 through 3 would be graphic design errors that should be fixed.  Items 4 and 5 are possible hardware network issues to be checked and are less likely to valid errors.

1. Wide Thumbnails graphics should be compressed .jpg,  16/9 or 1.78 Aspect ratio and no larger than 2 times the largest possible thumbnail setting.  250 x 141 is suggested.  Redo all thumbnail for wide format to this size.
2. Poster (portrait) graphics should be compressed .jpg, 3/2 or 1.5 Aspect ratio tall and no larger than 2 times the largest possible poster setting.  200 x 300 will work, but 500 x 750 or even 1000 x 1500 can work if they are moderatly .jpg compressed.  These images do larger appear on media pages.
3. Remove and replace any graphics that are .png or very high file sizes above 400K.  These types of files are incorrect for browser viewing, especially with a remote Internet login.
4. Check for any other page load speed issues such as extremely large backgrounds or any errors in the console log, or delays from errors with network or Internet traffic.
5. It is possible that a server might be over taxed due to traffic, multiple users, memory issues or slower CPU's.  Typically, this would not be an issue.
   
   I use a slower server with limited memory.  But all my graphics pass items 1 to 3 and I never see this issue.

Hope that helps.

 

 

[Luke 42077]

Hi, that's odd.  I don't see that on Firefox for Windows. What OS are you on?

[alitcons01 4]

The screen recording comes from Arch linux x86-64. Same thing on MacOS 14.6 (M2). I've been struggling with this thing for more than a year.

Chrome family and Safari have no problems. Images with an aspect ratio thad does not fit the tiles are not stretched but correctly centered.

Clearly, upload tailored images one-by-one is not a solution. I have hundreds of TV channels and thousands of images and videos. When elements with different aspect ratios are in the same collection, the problem arises. On logos, previews, posters, banners.

I guess it's something related to the CSS flexbox elements that FF manages in its own (buggy) way. Disabling video acceleration or smooth scrolling doesn't make any difference.

[Luke 42077]

Yes I think that’s exactly what it is.

[alitcons01 4]

Mozilla deprecated the box-orient property, still used in Emby's CSS

https://developer.mozilla.org/en-US/docs/Web/CSS/box-orient?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default

I suspect this is involved in what we are discussing about.

[Luke 42077]

4 hours ago, alitcons01 said:

Mozilla deprecated the box-orient property, still used in Emby's CSS

https://developer.mozilla.org/en-US/docs/Web/CSS/box-orient?utm_source=devtools&utm_medium=inspector-compatibility&utm_campaign=default

I suspect this is involved in what we are discussing about.

We are not using that directly, although I suppose it's possible that it ends up getting added to our final compiled css by our build tools.

[alitcons01 4]

Seems fixed in 4.9.0.30 beta. Aspect ratio is now preserved, whatever the container.