-
Posts
-
My background image is not sized correctly only on iPad Safari browser when the background image is set to “Fixed”
Hey apremierdj,
Can you give us a screenshot of the issue on your ipad? so we can have some comparison.
Best regards,
NikkoBack ground not sized correctly. This is when setting is set to “Fixed” :
https://www.dropbox.com/s/wy56x7wo6wsgbr2/IMG_0065.png?dl=0This is how the background should look but only works when setting is “Scroll” :
https://www.dropbox.com/s/ec8tmhp27fhmnsx/IMG_0066.png?dl=0Background setting :
https://www.dropbox.com/s/3kntwh4mndaar8a/Screen%20Shot%202019-11-26%20at%2010.26.47%20AM.png?dl=0Hi apremierdj,
Please have a look at the following links:
https://github.com/WordPress/gutenberg/issues/6025If you need further assistance please let us know.
Best regards,
VictoriaHi apremierdj,
Could you please clear the cache, check again and get back to us. Looks good on my iPad.
Best regards,
VictoriaThis only happens on Safari on ipads. Chrome works fine.
https://www.dropbox.com/s/up5zmbb58oce7yu/IMG_0007.png?dl=0
https://www.dropbox.com/s/5mrwrdnff8xc4nz/IMG_0008.png?dl=0
https://www.dropbox.com/s/rw770l2exj68vaz/IMG_0009.png?dl=0Hi,
Thank you for the screenshots.
This is a known issue on iOS — fixed background doesn’t work properly when its size is set to cover.
// https://caniuse.com/#feat=background-attachment
iOS has an issue preventing background-attachment: fixed from being used with background-size: cover – see details
You can either set the background attachment to scroll, or use css media query to adjust the property from fixed to scroll on iPad view.
Best regards,
IsmaelAre you able to tell me what I can put in the quick css for media query to adjust the property to fixed to scroll on iPad view?
Hi apremierdj,
Can you please give us the link to the page with the parallax section.
Best regards,
VictoriaHi apremierdj,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (min-width:768px) and (max-width: 1024px) { .avia-safari .page-id-163 #av_section_1 .av-parallax { background-attachment: scroll; } }If you need further assistance please let us know.
Best regards,
VictoriaI have tried both methods explained but neither is working for me. Can someone please help?
since this background is on the majority of my pages, I’d like a code that will apply to the entire site, please.
I’ve included my login details in the private section.
Hi apremierdj,
You can remove the page id class and it should work. Please give us the link to another one of the pages with parallax.
Best regards,
VictoriaOK – i’ve removed the page ID and still have the issue. Here are more pages that include parallax
Hi apremierdj,
Thank you.
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (max-width: 1024px) { .avia-safari #top .av-section .av-parallax { background-attachment: scroll; } }If you need further assistance please let us know.
Best regards,
VictoriaHi,
The css compression in the Enfold > Performance panel is enabled, so it’s possible that the recent changes are not yet included in the stylesheets. Please disable the compression temporarily and make sure to purge the cache.
Best regards,
IsmaelHi apremierdj,
Please add !important to the code:
@media only screen and (max-width: 1024px) { .avia-safari #top .av-section .av-parallax { background-attachment: scroll !important; } }Best regards,
VictoriaHi apremierdj,
It looks fine on my iphone. Could you please clear the cache, check again and get back to us.
Best regards,
VictoriaThis is regaurding Safari on iPads specifically. Not iphones or any other device.
This is still an issue.
- You must be logged in to reply to this topic.