Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 3, 2015 at 4:36 pm #423150
    fusion01

    Me again, issue with a page on another site due to a background image within a colour section that is top centred, fixed, and set to ‘stretch to fit’.

    http://capetown-cosmetic-doctor.co.za/treatments/

    In Google Chrome, below the ‘image with hotspots’ the background image of female (with hands below chin) is scaled to something massive, around 400% I’d guess. Real issue. Renders 100% fine on desktop.

    In Firefox it’s worse, the image with hotspot disappears the minute I start to scroll down and I see hotspot numbers appearing on top of the image below (female with hands under chin). Numbers for hotspots are there but the text to the right of each has gone.

    Basically the ‘fixed’ nature of background images within colour sections is causing huge rendering issues with all my major browsers on Google’s Nexus mk2 2013 device. Must I change them to ‘scroll’ within mobile breakpoints as a fix? Bummer if so.

    April 3, 2015 at 8:19 pm #423251
    fusion01

    So it’s not only a Google Nexus device bujt also my Nokia 520 with Windows Mobile 8 and Internet Explorer. The image behind the hotspots disappears and the image that was from the colour section below is then underneath, the mobile labels that follow only show the numbers, not the labels themselves. Image with hotspot feature is completely unusable. Please do investigate, this isn’t all that hard/software specific and shouldn’t be too hard to replicate!!!!

    April 6, 2015 at 9:47 am #423853
    fusion01

    Hi, please provide a response soonest.

    Screenshots to illustrate the issue:

    http://www.andrewb.co.za/misc/bg-im/03-nexus.jpg
    http://www.andrewb.co.za/misc/bg-im/04-nexus.jpg
    http://www.andrewb.co.za/misc/bg-im/05-nexus.jpg
    http://www.andrewb.co.za/misc/bg-im/06-nexus.jpg

    Thank you.

    April 6, 2015 at 1:32 pm #423906
    Yigit

    Hi!

    I checked your website on my iphone and i could not reproduce the issue. You can take a look at screenshots here – http://imgur.com/a/uLSwG
    I asked my teammates to check your website on their mobile devices. Please kindly wait to hear from them.

    Regards,
    Yigit

    April 6, 2015 at 6:39 pm #424112
    Andy

    Hi!

    at first please update to Enfold 3.1.3.
    Then try to switch off all plugins, to see if one is causing this issue.

    If that does not help, you could try to control the background image with this: 

    @media screen and (max-device-width: 966px) {
.avia-full-stretch {
background-size: 100% !important;
}}

    adjust “100%” as needed.

    Regards,
    Andy

    April 7, 2015 at 6:13 pm #424863
    fusion01

    Thanks for this. It’s a little bit better, the background image doesn’t scale up as large as it did (gigantic!) – now it’s pretty small, I suppose occupying about the same screen real estate percentage as the desktop view. Does then sit right at the top and crops off so looks wierd. Also now the image with hotspots area above doesn’t get corrupted (it used to disappear altogether) when scrolling back up, so again, a bit better!

    Still not 100% happy and hope to see mobile improvements with emphasis on background image handling in future iterations.

    Cheers.

    April 7, 2015 at 6:31 pm #424870
    fusion01

    Please reference the background image after your CSS was added:

    http://www.andrewb.co.za/misc/bg-im/07-nexus.jpg

    Cropping top off and it’s not filling the height which was preferable.

    Cheers.

    April 8, 2015 at 2:56 am #425031
    Andy

    Hi!

    I already told you that you should adjust the “100%” as needed. Play around with that number to find what you like, for example you could try this:

    @media screen and (max-device-width: 966px) {
.avia-full-stretch {
background-size: 285% !important;
}}

    I hope this makes things clearer.

    Best regards,
    Andy

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.