Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • May 18, 2020 at 11:49 am #1213991
    Kritzfred

    Hallo

    ich habe folgendes Problem mit der Darstellung auf mobilen Endgeräten:

    Sowohl in Farbfeldern angelegte parallax Backgroundfotos, als auch im Main und Alternate Contant fixierte Backgroundbilder werden auf mobilen Devices nicht animiert dargestellt sondern nur als mitscrolender Background.

    Hier scheint ein Problem mit der Layerdarstellung zu existieren. Es gibt keine Verschiebung der überlagerten Layer.

    Bitte um schnelle Hilfe.

    Danke + Grüße nach Österreich

    May 24, 2020 at 2:30 pm #1215768
    Yigit

    Hey,

    Thanks for contacting us and sorry for the late reply!

    Could you please try adding following code to Quick CSS in Enfold theme options > General Styling

    @media only screen and (max-width: 1024px) {
    .avia-safari .avia-bg-style-fixed .av-parallax {
	background-attachment: scroll !important;
	background-size: cover !important;
    }
}

    If that does not help, please post a link of your website :)

    Best regards,
    Yigit

    May 29, 2020 at 12:51 pm #1217675
    Kritzfred

    Hi Yigit,

    thanks for your reply!
    Unfortunately it does not work. My website is not online yet. But you have the same problem with your website.
    Take a look at: https://kriesi.at/themes/enfold-2017/

    With apple devices and some other mobile devices the background does not scroll, neither.
    The same problem occures with background videos.

    Thanks in advance for further help.

    June 4, 2020 at 1:52 pm #1219390
    Ismael

    Hi,

    That is actually expected because iOS and a few browsers on mobile devices only have partial support for fixed elements. You can find the browser compatibility stats in the following link — check the Notes and Known Issues tabs.

    // https://caniuse.com/#feat=background-attachment

    Most mobile devices have a delay in updating the background position after scrolling a page with fixed backgrounds.
    1 Partial support refers to supporting fixed but not local
    2 Partial support refers to supporting local but not fixed
    3 Only supports local when -webkit-overflow-scrolling: touch is not used
    4 Does not support fixed, and due to a bug only supports local if a border-radius is set on the element. Firefox does not appear to support the local value when applied on a textarea element.
    Chrome has an issue that occurs when using the will-change property on a selector which also has background-attachment: fixed defined. It causes the image to get cut off and gain whitespace around it.
    iOS has an issue preventing background-attachment: fixed from being used with background-size: cover – see details

    Please note that the css code above doesn’t fix the issue, it actually disables the fixed effect and changes the behavior of the background so that it scrolls relative to the page as it does normally.

    Best regards,
    Ismael

    June 4, 2020 at 3:36 pm #1219431
    Guenni007

    for mobile there will be nearly no alternative to let them scroll away.
    but some desktop browsers even got troubles with it too: e.g: Safari13

    the background-attachment: fixed runs often not as expected.
    But there is a workaround to fix this:
    https://kriesi.at/support/topic/theme-is-shaking-a-lot-in-safari/#post-1207474

    the trick is not to have that background-attachment:fixed – but a container below ( and the pseudo container : before fits well for that ) that has position:fixed
    : see link above

    by the way if you need more browser support: https://autoprefixer.github.io/

    and use then in the link above better :

    .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;
}
    • This reply was modified 4 years, 6 months ago by Guenni007.
    June 4, 2020 at 3:58 pm #1219440
    Guenni007

    It is a pitty that enfold changes it to a parallax container with scroll. because that workaround will do the trick even here.
    On grid-cells you can see that it worked : https://webers-testseite.de/
    those wordpress signs on the left.

    and here on the bottom color-section with background : scroll but with the trick over :before with class : bg-fixed:
    https://webers-testseite.de/background-fixed/

    • This reply was modified 4 years, 6 months ago by Guenni007.
    June 9, 2020 at 5:40 pm #1220911
    Kritzfred

    Thanks to all for your support!

    In my opinion this is an important feature, worth enough to get some attention by Kriesi.

    @ Kriesi: Do you plan to fix that bug, so that it is possible to use that enfold feature at all mobile devices and browsers?

    Would be great!

    June 12, 2020 at 7:38 pm #1222167
    Guenni007

    yes – I guess you’re right. But for now you can help yourself by giving this class to the Color-Section and leaving the background image on scroll in the options of the Color-Section.
    By initially leaving it on scroll you prevent the mobile devices from creating this extra parallax container.

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.