Home Forums WoodMart support forum Wallpaper on Page Scroll Fixed on Visual Mobile

Wallpaper on Page Scroll Fixed on Visual Mobile

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #438299

    staffcreator
    Participant

    Hi guys!

    A strange thing is happening to me!

    – set the background with fixed scroll for the Home page through the Theme Preset settings.

    – In Desktop view it works fine.

    – Unfortunately it doesn’t work in Visual for Mobile, when you scroll the image also goes up and doesn’t stay fixed. (See attached video)

    – If you preview with the Browser in Mobile view it shows you that it works correctly, but in truth if you see it from the Phone unfortunately it doesn’t work, so what the browser shows is not true.
    Actually the scrool doesn’t work with the still image.

    Can you do a check?

    The page I’m working on is the Home Page.

    You have to test on this page.

    Obviously I also tried to apply the CSS code to see if at least this way I could be able to solve .. (See attached image)

    Obviously if we remove the code if you see the preview from a Phone it shows you the Blue background of the sky, but in reality I would also like to show the Mountains…… Which can be seen clearly from a Browser preview with a mobile view.

    The users to connect to the site and the url I leave in private.

    Thank you guys!
    I’ll wait for you here!

    Greetings

    Attachments:
    You must be logged in to view attached files.
    #438321

    Hello,

    Did you try out the Parallax effect for the Row Settings in this regard? https://snipboard.io/40bNI9.jpg

    We have commented out your CSS for the Mobile view because the background attachment fixed is already being showing for the background applied so you don’t need to apply it additionally: https://snipboard.io/SDFVya.jpg

    And as far as we are seeing your Site in real time Mobile view it seems to be working fine.

    Best Regards

    #438333

    staffcreator
    Participant

    Hello Aizaz

    Thank you for your answer..

    I don’t like the Parallax Effect on the Home page, so it should remain Disabled.

    As for the Mobile view.. (As I had already described in the ticket opening) it’s not working well.. Because what you see from the Browser Simulator in reality if you try everything from a Real Phone — Take an Iphone or other Smartphone Real, you don’t see it that way.. For example, now if you try it on a phone you see an all blue background, it ONLY takes the sky..

    But actually I would like it to look like it does on the Browser Simulator..

    Do you understand what I mean?

    Take a good look at the video I sent you.

    Let me know why it’s not working yet.

    I’ll wait here

    Thank you dearest!

    #438340

    staffcreator
    Participant

    …..Aizaz

    For better understanding, I am attaching two videos.

    The first video is taken from the Browser with Mobile Simulation, and so it works well! so I would like to see.

    The Second video is taken directly from a Phone, to be exact it is an iPhone 12 pro, and as you can see .. it is not the same as the preview of the simulation via Browser .. in this from the Phone you only see the Blue Sky and it is not seen as in the first video simulated by Browser.

    I would like it to look like Simulate Browser in the REAL Phone view as well.

    Can this be done?

    Let me know
    Thank’s for your job!

    I’ll wait here 🙂

    Greetings

    Attachments:
    You must be logged in to view attached files.
    #438344

    staffcreator
    Participant

    …. Sorry I didn’t attach the other video taken from the phone…

    Attachments:
    You must be logged in to view attached files.
    #438490

    Hello,

    We had earlier checked your issue on the real Mobile phone and have again checked the concern on the Smartphone again. Only the content seems to be scrolled instead of the Image. Please refer to the following Video for reference in this regard: https://www.veed.io/view/afdd4e8a-b574-4cfc-90dc-7b1c543e473c

    Best Regards.

    #438532

    staffcreator
    Participant

    Hi Aizaz

    Thank you for your reply!

    You just have to be the content that moves but the background should look like in your phone…

    In my phone you don’t see it like in yours but you see it with a Blue background… (see attached video) strange because I’m using an iphone 13 Pro, how is this possible?? What phone did you use? Regardless of the phone, the formats are more or less the same.

    Let me understand where I’m wrong ..

    Attachments:
    You must be logged in to view attached files.
    #438557

    staffcreator
    Participant

    Bye! I wanted to update you on the tests I’m doing.

    I noticed that this bug is only doing it on APPLE devices, in fact I realized that the problem is also seen on IPAD PRO 12″ — that’s why I couldn’t compress the video as a test, but trust me this problem is happening also performing on an IPAD PRO which has a different width from a normal phone, in fact I’m experiencing the bug only with APPLE devices.

    I did a new test with a Xiaomi Mi NOTE 10 phone and it actually looks good .. as shown in the preview of the Browser in Mobile simulation.

    I noticed that in APPLE devices the problem is that it doesn’t take the right parameters of the Image Sizes and the Fixed point.

    I haven’t tried it on APPLE MAC BOOK or MAC MINI computers because I don’t have the devices to do the tests. So I found this problem on APPLE MOBILE Devices, Iphone and IPAD…

    I therefore confirm that at the moment the display for these devices does not work well.

    While on ANDROID and WINDOWS devices they seem to be working.

    But the problem remains because it doesn’t work well on APPLE devices.

    I also update you that on the APPLE devices mentioned above the tests were carried out by deleting the various cookies and trying with different browsers, Chrome, Safari, Edge, etc. Always the same bug only for Apple devices.

    Please Aizaz can you get the developers to check well?
    as all users who have an APPLE Mobile Device do not see the background of the main page well.

    Thank you for your and your JOB! 🙂

    I’m sure you’ll sort it out soon!
    I await you here!

    Greetings!

    #438858

    Bogdan Donovan
    Keymaster

    Hi,

    What you have shown in your demonstration videos is a work of CSS position: fixed in different browsers and operating systems, which may differ from each other. In order to avoid content jumps during page scrolling, which will not look good, and may also affect the Google Page Speed google rating, the space under the sticky header is always reserved. This space is located in a different HTML element and because of that it cannot have the same background that you set for .main-page-wrapper.

    Unfortunately, this behavior can’t be completely fixed via custom code or theme update, but you can control the background of sticky header reserved space to make it look more visually pleasing, for example by setting a background color to it which is similar to the color of the header.

    Try to add following custom code to Global CSS area in theme settings:

    .whb-header {
    	background-color: #904530;
    }

    Kind Regards

    #438892

    staffcreator
    Participant

    Hi Bogdan!

    Thanks for your message!

    I understood what you told me.

    But my request is another…
    Maybe we didn’t understand each other well…

    I wrote above, that I made other tests and found the following:

    – On ANDROID and WINDOWS devices the problem does not occur.

    – On APPLE MOBILE, IPHONE and IPAD devices the problem as described above occurs, so there is something incompatible with the theme.

    I explained in detail the problems I encountered.
    So if you can see it well on ANDROID or WINDOWS devices………. the question arises….

    Why is it not visible on APPLE MOBILE Iphone or Ipad devices?

    That’s all…

    And I would like to understand if you can kindly fix this Bug.

    Thanks, I look forward to more specific answers.

    Greetings

    #438907

    Bogdan Donovan
    Keymaster

    As we mentioned in a previous reply, the sticky header is done by CSS position: fixed property witch fixed header to the top of the site viewport. position: fixed property display during scroll depends on the browser and operating system (Windows, Mac, iOS or Android), which in turn have own types of vertical touch swipe and the scroll smoothing. Different scroll smoothing technics is laid down on the browser and operating system level and can’t be controlled via WordPress theme.

    Unfortunately, this behavior can’t be changed or somehow standardized, only via WordPress theme.

    Kind Regards

    #438910

    staffcreator
    Participant

    Ok bogdan

    Thanks for the clarity of the information.

    So how can I fix this problem? It is only for mobile viewing.

    I had noticed that with Parallax on the Row or on the Column they were seen correctly… only in this way I can’t choose whether the placement is in COVER or Container…

    Can you recommend me something?

    The background color I had already thought of .. but I wish you could apply the background itself.

    Let me know if you have any ideas

    Thanks Dearest

    Greetings

    #438919

    Bogdan Donovan
    Keymaster

    1. Header scroll behavior depends on the browser and operating system scroll smoothing type, and it can’t be changed or fixed via WordPress theme. To change header spacing color from white to other color, try to add following custom code to General Custom CSS area in Theme settings and replace color code to the desired one.

    .whb-header {
    	background-color: #904530;
    }

    2. If you are enabled Background Parallax in the row settings (https://prnt.sc/mexbDbiM7gbA), your row background-size property will be always set to “cover” even if you choose different property in corresponding option, because parallax can only properly work if its background image covers its section.

    Kind Regards

Viewing 13 posts - 1 through 13 (of 13 total)