-
Posts
-
Hi all!
I am still working on a test site create.madomains.com and I goth backgrounds to semi fill the browser window by adding a default background color and using a PNG fixed to the lower right corner, then using complimentary backgrounds for the header and footer.
The issue I am having is all images appear perfectly in Firefox, Chrome, and Safari on the desktop but not on the same browsers on a mobile device. On mobile it is like the browser is ignoring the “Fixed” command. If you scroll you will see the image in the lower right at the bottom of the page but it scrolls.
I did find this thread but I have already updated wordpress and theme to most current, 4.6.1 and 3.8 respectively. Therefor I am opening a new thread.
https://kriesi.at/support/topic/background-images-not-working-on-mobile-device/Any thoughts?
Login and details in Private Content
Hi,
Could you please provide a screenshot of the issue? Aside from the huge custom padding of the cell container, I don’t see any issue with the home page. The mobile view may look different compare to the desktop view because of the background image size relative to the screen size. We can apply a different background image, smaller than the current one, for mobile view.
@media only screen and (max-width: 767px) { .main_color { background: #212121 url(//create.madomains.com/wp-content/uploads/2016/09/backgroundformobileviewhere.png) bottom right no-repeat fixed; } }Adjust the “backgroundformobileviewhere” placeholder.
Best regards,
IsmaelHere is a screenshot but it doesn’t show much. http://create.madomains.com/wp-content/uploads/2016/09/IMG_0560.png
On Desktop/Laptop the background of the body area is fixed, on mobile its not and it scrolls. I can’t speak to android devices because I don’t have any but this is the case on iOS vs. OS X and Windows in Safari, Firefox and Chrome. That tells me its not browser specific but it is mobile specific. I tried using the “request desktop” option in Safari but that made no differences.
The image in the lower corner appears correctly in relation to the size. The issue is that it is not static to the lower right corner as it should be when “Fixed” is selected.
Additional note: I updated to iOS 10.0.1 since the ticket was opened but it has made no difference.
Hi,
try to add this as well:
@media only screen and (max-width: 767px) { .main_color { background-position: -718px -331px !important; }}and adjust as needed.
Best regards,
AndyNope. no changes. Its like its ignoring the fixed option. These settings as well no matter what i set the px to.
See private comments
Hi,
I think the code should work fine. Try to clear browser cache and hard refresh a few times.
Best regards,
AndyHi,
you did not use my code. Now I inserted it into your Quick CSS field and it seems to work. Can you confirm please?
Best regards,
AndyI used the code in the Quick CSS, I tested, it failed, I deleted the code. I don’t keep none functioning code. Call me eccentric.
Retesting with you inserting the code. Still no difference. It is not fixed on iOS mobile devices using Firefox, Chrome, Safari. Chrome and Firefox both clear cache on restart but I cleared it anyway just to be sure. Same result.
Hi,
this is what I see when using my code: http://i.imgur.com/iFwjvzY.png
which seems pretty fine to me. Just adjust the values as needed.Best regards,
AndyMaybe its an iOS issue? Are you using an Android or Apple device?
I have no problems ripping into Apple if we can determine its their issue. I get the same issue when I “request desktop site” on both Chrome and Safari. Could it be the way the iOS translates something?
See private notes
Hi,
I tested on Android, but also on desktop with Chrome emulator for iPhone etc. and it all seems to be displayed fine. Check on another device as well, as well as on an android device.
Best regards,
AndyIts got to be the iOS thing. Its all to possible that an emulator would miss it. I will try it on an emulator when I complete the changes mentioned in the previous private notes.
OK I reactivated the theme and tested, same. I tried an emulator (http://www.responsimulator.com/?url=create.madomains.com). The emulator shows it working but not the actual device. On the iPad its at the bottom and you have to scroll to it. Now I ran an update on the iPhone a few hours ago and it shows it positioned correctly, similar to the emulator, but it still scrolls. This tells me its the devices not the code. If its the code then it would show the same before and after the update.
Browsers used on this test:
iPad – Chrome
iPhone – SafariDetermined. It is an iOS issue. Only iOS devices are affected.
You can look into it if you want. Apple has been informed and I have enough to report to the client. Go ahead and close this ticket.
Thanks for trying!
- The topic ‘Fixed background not working on Mobile (iOS 9.3.5)’ is closed to new replies.