full width fixed bg image in sections on ios

[dasigna]

so for another thing experiencing actually:
set up a front page with several sections, each with bg-image and set to 'cover' and 'fixed' to jump from section to section...
works well on desktop, not so well on only some mobiles and not at all on ios-devices! whereas the bg-image mostly always covers the viewport as intended, it stretches out on ios-devices far beyond whats expected - when on ios (regardless of browser) they seem to follow the whole page size and not the viewport! so this messes things up completely on ipad etc.

tried with several tweaks already but cant get close to whats indended so far... so in fact i am asking for a proper (and maybe best) way to solve this for the elementor sections! (in case this could not be solved -or served- from within elementor itself).

thanks in advance.

[arielk]

Did you set the section as a full height (Fit to Screen)?
Currently section with full height is not supported in Mobile.

[peepshow]

Just noticed this too.

How about providing additional measurement options [ %, em, vh ] in the Section > Height options panel? That'd be much better than forcing pixel based measurements.

In fact it would be wonderful to see VH/VW options everywhere. 👌

[dasigna]

by now, it seems this is due to the 'background-attachement:fixed' ... ios dismisses or ignores this obviously for fit to screen-scenarios. setting the bg to 'scroll', the image is scaled as intended, but you wont have the same effect. so maybe some change in coding from the elementor side would do it already?
not that easy it seems, as its a known issue with ios afaik and there are some solutions out there - but hard, up to impossible to implement with elementor. so it would be a great thing to look after this - even if theyre 'damn apples' - sadly theres too many of them out there to be ignored ... :-)

[kadoogan55]

I have been requesting a fix for this for weeks now, and I am one among several others. This problem does not occur in Beaver Builder and so it is possible to have working correctly.

[kadoogan55]

Wondering if this is ever going to be fixed.

[peepshow]

@kadoogan55 – It looks like Beaver Builder just uses media queries to make the bg image scroll on small screens. A work around for now is to add some CSS like the following to your theme then add the class fixed_background_fix to the Elementor section in question.

.fixed_background_fix {
  background-attachment: scroll !important;
}
@media screen and (min-width:480px) {
  .fixed_background_fix {
    background-attachment: fixed !important;
  }
}

@arielk – BTW, when you do get to this bug it might be an idea to consider slightly changing the way you insert background images to reduce repaints and improve the rendering performance.

There are a lot of write ups about how to solve the performance issues with backgound-size: cover and background-attachment: fixed.

Essentially it involves moving background images to a :before or :after pseudo element and adding the newish will-change: transform; property.

So rather than this.

.elementor-349 .elementor-element.elementor-element-### {
    background-image: url(###.jpg);
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

You could output something more like this.

.elementor-element.elementor-element-####  {
  min-height: ###;
  position: relative;
  overflow: hidden;
}
.elementor-element.elementor-element-####::before {
  background-image: url(####.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  content: '';
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  will-change: transform;
  z-index: -1;
}

[kadoogan55]

I appreciate the workaround. However, I do not want to mess around with it - I just want Elementor to work.

I don't recall reading anything prior to buying the pro version that mentioned "section with full height is not supported in Mobile". I wouldn't have bought an allegedly "pro" version knowing it was incomplete.

NOTE: I think I was a little harsh writing the following paragraph - I have seen since there has been acknowledgement and work possibly moving forward with the issue I am complaining about. Crossing my fingers it won't be long now before a fix is completed. My apologies to the devs. I have left the paragraph I wrote prior so people will see what I am apologizing for.

I have frankly given up on the whole thing having brought it up repeatedly with seemingly little acknowledgement or interest in fixing it. Especially seeing requests for a fix closed off without a fix being made.

At one point I had created my own test site just to see which of my top three fave builders did the best job overall using similar layouts - note that this was a test directed at vertical mobile display:

http://prototyper01.x10host.com/wp/

• Elementor Pro
• Beaver Builder Pro
• Live Composer (Free - no pro version purchase required)

Elementor would have won if not for the background image issue - I think Live Composer does the best job overall because it not only works in mobile on iOS, but also allows for the parallax effect (in desktop mode) which neither Beaver Builder or Elementor offer. Elementor has overall a faster, arguably better UI than Beaver Builder - I do enjoy Live Composer's UI, and the price is right at free, with more options than most other free variations.

My overall goal was to let the devs know there was a problem and wait for a fix. Just didn't think such an important issue would go this long.

There are plenty of other working options to be used in the meantime. I will wait until someone maybe adds those code fixes to Elementor directly and it is hopefully figured out.

Shouldn't be too much of a problem now that Peepshow has what appears to be a solution. Kudos to Peepshow!