Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #685927

    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

    #686681

    Hi MichaelAlbany,

    Login details are not working, could you check/verify please?

    Thanks,
    Rikard

    #686841

    Damn auto correct. Try User kriesi
    New PW in Private Content

    #688890

    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,
    Ismael

    #688905

    Here 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.

    #690778

    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,
    Andy

    #690821

    Nope. no changes. Its like its ignoring the fixed option. These settings as well no matter what i set the px to.

    See private comments

    #691003

    Hi,

    I think the code should work fine. Try to clear browser cache and hard refresh a few times.

    Best regards,
    Andy

    #691059

    Nope. Cleared cache in Chrome & Firefox, same result. (Mobile versions)

    • This reply was modified 7 years, 6 months ago by MichaelAlbany.
    #691643

    Hi,

    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,
    Andy

    #691658

    I 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.

    #691775

    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,
    Andy

    #691780

    Maybe 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

    #691804

    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,
    Andy

    #691822

    Its 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.

    #691865

    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 – Safari

    #691908

    Determined. 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!

    #692622

    Hi,

    glad you could determine it so far. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

    Best regards,
    Andy

Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘Fixed background not working on Mobile (iOS 9.3.5)’ is closed to new replies.