[Login Background] Rendering diff between Internet browsers

[mterceno]

Hi all,

 

I can't to resolve the following problem.

 

I set a login background in my application et the rendering in Firefox is not good. I attach a print screen which compares the rendering between Opera & Firefox.

 

Chrome & Edge work like Opera.

 

 

The background size is not same in Firefox. It seems repeat himself...

 

Do you have an idea to solve this problem ?

 

Best regards

[Sherzod]

Hi,

 

Which version FF are you using?!

[mterceno]

Hi,

 

The last version => 53.0

 

Regards,

[Sherzod]

You set this through UniMainModule -> LoginBackground ?!

[mterceno]

Yes and I set True to Fit property

[Sherzod]

Can you make a small testcase for this?!

[GerhardV]

I have also found that even the fonts are "slightly" bigger in Firefox.

[mterceno]

I put in attachment a new project with this example.... 

LoginBackground.zip

[Sherzod]

Hmm, It works for me:

 

[Sherzod]

What is your screen resolution?!

[mterceno]

_{My resolution screen is 2560 x 1440}    but the problem appears when a browser window is not in full screen. When you resize the window, you should see the problem with Firefox.

I attach a video demo(To the left is Opera / Right is Firefox)

2017-04-21 at 14-28-34.zip

[Sherzod]

Ok, thank you for the video demo,

We will analyze this issue

[Sherzod]

Hi,

 

It seems that FF has a problem with:

background-size: cover;

Can you try this approach for now (maybe it's not the best solution at the moment)?!:

 

1. UniLoginForm1 -> Script:

Ext.onReady(function() {
    document.body.onresize = function() {
        var clW = document.body.scrollWidth;
        var clH = document.body.scrollHeight;
        var values = clW + 'px ' + clH + 'px';
        document.body.style.backgroundSize = values;

    }
});

2. UniLoginForm1 -> ClientEvents -> ExtEvents -> Ext.window.Window [window] ->

function window.deactivate(sender, eOpts)
{
    document.body.onresize();
}

function window.move(sender, x, y, eOpts)
{
    document.body.onresize();
}

function window.resize(sender, width, height, oldWidth, oldHeight, eOpts)
{
    document.body.onresize();
}

Best regards,

[mterceno]

Thank you for your help. Your example works, but it stretches the background and the effect is not good.

 

I think I can inspire on this example

[Beginner]

del

[Beginner]

I resolved like this

 

Work FF and other browser

procedure TfrmLogin.UniLoginFormCreate(Sender: TObject);
begin
   UniSession.AddJS('document.body.style.background = ''url("/files/bg.jpg") no-repeat center center fixed''');
   UniSession.AddJS('document.body.style.backgroundSize = "cover";');
end;