Different behaviour on FireFox


#1

Hi guys,
I’m struggeling with a different behaviour of my Sydney page in FireFox (some difficulties) and other browsers (working fine).

When scrolling the BG the header banner moves quicker upwards than the content … leaving a white area in the background that looks stupid (doesn’t happen in other browsers)

The pictures of my projects have no gap between them in Firfox (they do in other browsers)

website: https://www.soundmarketingcompany.com/en/home/

Is there anything I can do about it?
Thx in advance,
Timo


#2

Hello Timo,

I visited your site with Firefox and looks like the white space only appears while one of slide images be visible. Please check your slide images dimension and ensure they’re identic and have larger size.

Regards,
Kharis


#3

Thanks for your answer Karis.
I exchanged all pictures for new versions with the size of 1920x1275 (as you recommended for the header slides) … The problem still remains in Firefox …
Any further ideas?
Cheers, Timo


#4

I visited your site once again with Firefox; and it looks like it’s displaying fine. Try clearing your web browser’s cache/history and reload your site.

Regards,
Kharis


#5

I did as recommended … Cleared cache, reloaded …
Still the same effect - only in FF …
There seems to be major difference in the type of scrolling. While in FF the header scrolls quicker out of the displayed area than the content follows - it’s just the opposite in other browsers. In Vivaldi for example the content scrolls quicker than the header and overlaps the header …
I could send you a video that demonstrates the behaviour if that helps …
BTW: this only happened after I upgraded from Sydney to Sydney Pro (might also be related to the latest Sydney update)
Cheers, Timo


#6

Hello there,

It’s likely a matter of web browser’s rendering engine, which reads the parallax code differently. In Firefox the parallax is handled merely by CSS while others by JavaScript. The only option you could try is use larger image.

Regards,
Kharis


#7

Thanks Kharis,
I wonder what HTML element the white part is that appears when scrolling. If I could change this elements color fitting the content BG color I could overcome the problem …
Cheers, Timo


#8

Hello there,

Try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    .home .site,
    .home .sydney-hero-area {
      background-color: #ff0000;
    }

Adjust the color code to match your design requirements.

Regards,
Kharis


#9

Hi Kharis,

thanks for your support! I added the code as recommended but unfortunately it changes the background in other areas but not the white stripe under the header-Slider that occurs when scrolling. Any suggestion for other BG elements I could assign the color to?

Cheers, Timo


#10

Hello Timo,

Try this code:

    .header-slider .slide-item {
      background-color: #fff000;
    }

Regards,
Kharis


#11

Hi Kharis,
thanks very much. This workaround works and makes it look neat even under Firefox!
Appreciate your help!
Cheers, Timo


#12

Great!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis