Theme is shaking a lot in Safari

I can’t see your page – but I guess your background images are set to “cover” and the “background attachment” is set to fixed.
There are known problems with the background image display with Safari on Desktop-Macs.

to the mods: The best way to see the effect is to quickly switch from scrolling up and down on such backgrounds.

For mobile phones these wallpapers are set to : Scroll anyway.

But since the position: fixed for divs is not as buggy as the background-attachment: fixed is the trick to replace exactly that.

So try for color-sections : give a custom-class to your color-section f.e.: bg-fixed

then place this code to your quick css:

.bg-fixed {
  clip-path: inset(0 0 0 0);
  background-size: 0 !important;
}

.bg-fixed:before {
  background-image: inherit !important;
  background-repeat: no-repeat;
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: cover;  /*** depends on your wanted settings ***/
  will-change: transform;
}

see here: https://webers-testseite.de/background-fixed/

by the way this workaround for background-images of flex_cells works too.
but it might be better to style it a bit different – f.e. background-size: contain

See on that test-page home: https://webers-testseite.de
I deleted on that home page the background-size: 0px for the attachment fixed image – so you see both images !
the jittering one is the background-attachment: fixed !
Later i will reinsert that rule to have a non buggy home page again.

• This reply was modified 4 years, 7 months ago by Guenni007.

Hi Guenni007,

I applied your solution (.bg-fixed) on the web site I am working on.
It works perfectly. But, if I have any link on my page or a gallery, nothing works properpy.
I cant see any gallery and access any link, even use a link on a layerslider slide.
Only on safari 13+

You can see the effect on these pages, add .bg-fixed to any section and see what happens.

On this page, with no link, you can see how it works properly.

Any suggestion?
Thanks

i’m participant as you are – so i do not see any private content.

no link on your post –
the links in private content i can not see !!! only mods can see these links ( and the author)
The private data field is not visible for other participants – that is the intention.

i tested it on my site: https://webers-testseite.de/background-fixed/
you see an image gallery works – even a heading with link

yes now i can see : on home 2 in which color-section or section is a link which does not work?
To give advice – i had to see the issue – so put in the class again please –
or make a copy of the site and place the class there and send me the link.

Edit: i can see now that the background-image on that page does not come from the color-section itself ( color-section options dialog) it is a css
to .main_color
and it shold work the whole page where main-color is used.
i try to create a page that is nearby yours. but this is definitely a different starting point

• This reply was modified 4 years, 6 months ago by Guenni007.

as i said above – your setting is different to that of the topic starter post.

This custom class is for changing backgrounds in color-sections.
you set your background to a class:

i did it as you have done it via main-color class and not to have it on my domain globaly i included page-id:

.page-id-37336 .main_color {
    background-image: url(https://webers-testseite.de/wp-content/uploads/main-background-90.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 0 !important;
   /**** clip-path: inset(0 0 0 0);   get rid of that ****/
}

and set the background-size to 0
( on that case the clip-path has to go )

now we create the pseudo container for it:

.page-id-37336 .main_color:before {
  background-image: inherit !important;
  background-repeat: no-repeat !important;
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  will-change: transform;
} 

now we need to rise the z-index of the container for that page:

.page-id-37336 .container {
   z-index: 5
}

see here my test page: https://webers-testseite.de/multiple-color-sections/

• This reply was modified 4 years, 6 months ago by Guenni007.

Thanks Guenni007,
seems clear to me. I see your test page.
I’ll try this afternoon and get back to you.
Thanks

At the moment the site is not reachable – more tomorrow – today I’m going off work.

we had to exclude those sliders from building the pseudo container ; you are working a lot with the advanced layerslider etc. so i will have a look when your page is back again tomorrow.