iPhone Fixed Image Scaling Problem

Resolved pairfumlondon
(@pairfumlondon)

3 years, 10 months ago

Dear Tom,

We are currently trying to recreate our live site using only GeneratePress Pro, Gutenberg & GenerateBlocks.

It all looks very promising and GenerateBlocks really makes an enormous difference to Gutenberg page creation.

Here is a test page we have created:
https://staging.pairfum.com/copy-of-reed-diffusers/

What you will notice with the page is that on iPhone / iPad the ‘fixed’ full width images don’t scale well:
– the full width image at the top is set to ‘scroll’, e.g. bauhaus style room
– the full width images further down are set to be ‘fixed’, e.g. white rose, candle ‘with love’, pink cherry blossom

On the iPhone / iPad the ‘fixed’ images seem to have been magnified to an extent that you only see a very small section of them and they are unrecogniseable.

The ‘scroll’ image at the top displays without issues.

On Android, this issue does not seem to occur.

Within Chrome’s emulator for iphone, ipad, … the issue is not visible either. You actually have to view the page an IOS device.

Do you have a solution for this?

We very much prefer the ‘fixed’ setting.

Many thanks for help with this.

Kind regards,

Pairfum London

The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

Plugin Author Tom
(@edge22)

3 years, 10 months ago
Hi there,

Sorry for not getting back to you sooner!

Just to confirm, are we talking about the two fixed background images near the bottom of the page?

What about disabling the fixed option on mobile?:
```
@media (max-width: 768px) {
    .entry-content .gb-container {
        background-attachment: scroll;
    }
}
```
Thread Starter pairfumlondon
(@pairfumlondon)

3 years, 10 months ago

Hi Tom,

Yes, we are speaking about the three full-width images towards the bottom of the page. The first image you is set to ‘scroll’. It allows us to see the difference between the two settings.

Many thanks for the suggestion.

Where is falls down is that it is less an issue of screen size and instead a problem linked to iOS, i.e. iPhone, iPad, iPad Pro.

What about implementing one of the solutions suggested here:
https://stackoverflow.com/questions/30102792/css-media-query-to-target-only-ios-devices
https://www.kevinleary.net/php-detect-ios-mobile-users/

Many thanks for your help to fix this issue.

Kind regards,

Pairfum London
Plugin Author Tom
(@edge22)

3 years, 10 months ago
Not sure why WP.org isn’t notifying us of your replies – sorry about the wait.

You could absolutely do that:
```
@supports (-webkit-touch-callout: none) {
    .entry-content .gb-container {
        background-attachment: scroll;
    }
}
```
Thread Starter pairfumlondon
(@pairfumlondon)

3 years, 10 months ago

Hi Tom,

Many thanks for this amended code.

We have placed it in style.css of the Generatepress Child theme and it works.

You can see it here:
https://staging.pairfum.com/copy-of-natural-home-fragrance-organic-skin-care-natural-niche-perfume-home-page/

The full width images are now ‘fixed’ on Windows/Android/Apple Mac but ‘scroll’ on iOS.

There is only one small issue, we see the following error message when editing style.css via cPanel for this code:
“unknown @ rule: @supports.”
We see a big red X which normally indicates an error in the code.

Do you understand what could be the issue here?

Many thanks for your help.

Kind regards,

Pairfum London

Plugin Author Tom
(@edge22)

3 years, 10 months ago

That’s just the CSS parser that cPanel is using – it doesn’t recognize @supports even though it’s a valid CSS rule. No need to worry about it.

Glad it’s working now! 🙂

Thread Starter pairfumlondon
(@pairfumlondon)

3 years, 10 months ago

Dear Tom,

Many thanks for putting my mind at ease.

Kind regards,

Pairfum London

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘iPhone Fixed Image Scaling Problem’ is closed to new replies.

Tags