Mobile URL background Image zoom not correct

Wappler General How To
#1

afternoon all,

I am having a weird issue with my background images and I am hoping someone out there has a solution.

The issue I am having is that the background images that I am using for the hero landing pages on the site are not appearing in the correct way. Here is the issue. I have the code written below;

.gecInfoBg {
    background-image: url("../assets/gecBackgrounds/changeWorld.jpeg");
    height: 75vh;
    background-size: cover;
    background-position: 50%;
    background-attachment: fixed;
}

from there the issue is that when viewing mobile the images are extremely zoomed and pixelated. However, when working on them in Wappler they are sized correctly. I have viewed them in chrome, brave, safari and the images are all the same. When viewing them on desk top the look and act correctly.

See the images below.

When working in Wappler;

Screen Shot 2023-02-01 at 10.25.44 AM
Screen Shot 2023-02-01 at 10.25.44 AM1088×741 391 KB
Screen Shot 2023-02-01 at 10.25.54 AM
Screen Shot 2023-02-01 at 10.25.54 AM790×720 430 KB

Now when viewing on desktop;

Screen Shot 2023-02-01 at 10.26.14 AM
Screen Shot 2023-02-01 at 10.26.14 AM1192×763 1.3 MB

and here is the issue with background images on mobile. Please note, I have viewed them on chrome, Brave, and Safari all the same issue. The other issue is that the image on mobile does not fix position.

IMG_0099.PNG
IMG_0099.PNG1170×2532 429 KB

Thanks for the help

#2

This seems to be a bug on iphone/apple devices:

https://www.google.com/search?sxsrf=AJOqlzVF9LtvzY_JZt5H2OpI6S7AI-bKLg%3A1675267815909&lei=547aY4SVN4G_xc8Pksen0AE&q=background-attachment%3A%20fixed%20ios&ved=2ahUKEwjEpMj42vT8AhWBX_EDHZLjCRoQsKwBKAB6BAhVEAE&biw=2560&bih=1272&dpr=1

https://developer.apple.com/forums/thread/99883

#3

thanks @Teodor Ill look into this.

#4

@Teodor

I have tried applying the following based on the article and still no dice. Am I applying it correctly to the CSS? I only as this because I have found that the way Wappler applies certain things sometimes they work and other times they do not.

This is how I applied the CSS,

.socialBG {
background-image: url("../assets/gecBackgrounds/socialBenfits2.jpeg");
height: 75vh;
background-size: cover;
background-position: 50%;
background-attachment: fixed;
}

/* for background-size:cover replacement on iOS devices */
@media only screen and (orientation: portrait) and (device-width: 320px), (device-width: 768px) {
.socialBG {
  -webkit-background-size: auto 150%;
  background-attachment: scroll;
}
}
@media only screen and (orientation: landscape) and (device-width: 320px), (device-width: 768px) {

.socialBG {
  -webkit-background-size: 150% auto;
  background-attachment: scroll;
}
}
#5

I have not tested any of the solutions. I just googled and found this is a bug on ios devices, so just linked a couple of topics, not sure if any of these work. But yes, this seems like properly applied css styles.

#6

Do you know of the reason why when this is applied to a style in Wappler it does not register the second class element? I seem to have to create separate @ medias for each one.

.redMain1 {
    margin: 5em 2em 1em 0;
}

@media (max-width: 590px) {
    .redMain1 .redMain2 {
        margin: 0;
        padding: 2rem 1rem;
    }
}
#7

Not sure what do you exactly mean.

The rule:

.redMain1 .redMain2 { }

targets an element with a class of .redMain2 located inside of an element with a class of .redMain1 i.e. for example:

<div class="redMain1">
    <div class="redMain2">
         This element will only be affected.
    </div>
</div>

If you want to target two different elements with two different classes your rule needs to be:

@media (max-width: 590px) {
    .redMain1, .redMain2 {
        margin: 0;
        padding: 2rem 1rem;
    }
}
#8

sorry, yes I forgot the , however even with the comma it still does not effect both classes. maybe I need to restart Wappler.

Thanks for the help

#9

Can you please clarify what exactly do you mean by this? It does not affect them where? What issue do you have exactly?

#10

I am trying to simplify my CSS. When combining 2 classes, with the @ media the change effects the first class in the line.

.redd1, ,redd2. meaning I see the change take place for .redd1 not .redd2. But if I then create a new @ media with the same settings as the last and assign it to the .redd2 the change happens.

#11

Can you provide a link where i can check that?