Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • April 21, 2017 at 9:16 am #781063
    Steven_Haines

    I have a number of Image elements set up with Image Hover Effect set to ‘Yes, slightly increase the image size’. I also have Image Styling set to ‘Circle (image height and width must be equal)’.

    This works as expected in the latest versions of Firefox and Chrome. However, in Safari (both the latest release version and the latest version of the technology preview), when I hover over one of the elements and the image zooms slightly, the circle gets cut off at the top and bottom and on both sides. This looks quite ugly.

    To see the issue, go to http://salamancapsychology.com.au/psychologists/#av_section_1 using Safari.

    Is there a way to avoid this problem?

    As always, many thanks for your help.

    April 25, 2017 at 12:16 am #782596
    Yigit

    Hey Steven,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    .avia-safari .av-styling-circle.av-hover-grow div,.avia-safari .av-styling-circle.av-hover-grow a,.avia-safari .av-styling-circle.av-hover-grow img,.avia-safari .av-styling-circle.av-hover-grow { overflow: visible; }

    Best regards,
    Yigit

    April 25, 2017 at 10:06 am #782716
    Steven_Haines

    Yigit

    Thank you, that fixed the clipping.

    I notice that the hover behaviour is different. In Safari, the whole element zooms slightly, i.e. the white circle and the photo zoom together. In Firefox and Chrome, the white circle stays the same size while the photo inside the circle zooms slightly.

    I don’t mind the difference although I do prefer the Firefox and Chrome behaviour as it is what I would expect from the image element in Enfold. Is this just an example of the black art of browser differences or can Safari replicate the behaviour in the other browsers?

    Many thanks for your help.

    April 25, 2017 at 1:03 pm #782847
    Yigit

    Hi,

    Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    Login credentials include:

    • The URL to the login screen.
    • A valid username (with full administration capabilities).
    • As well as a password for that username.
    • permission to deactivate plugins if necessary.

    Best regards,
    Yigit

    April 26, 2017 at 11:49 am #783409
    Steven_Haines

    Yigit

    Login credentials have been sent.

    Steven

    April 26, 2017 at 5:29 pm #783622
    Yigit

    Hi,

    I changed the code to following one

    .avia-safari .av-styling-circle.av-hover-grow * { 
border-radius: 50%;
box-shadow: 0 0 0 3px white, 0 0 0 4px #999;
}

    Please review your website now :)

    Best regards,
    Yigit

    April 27, 2017 at 7:01 am #783816
    Steven_Haines

    Yigit

    Unfortunately, that change has made things worse. There are four things I can see:
    1. The image circles are now clipped at the top and bottom all the time, rather than just when they zoom.
    2. On hover, the whole element still zooms rather than just the photo
    3. On hover, the zoom then clips the circle at the left and right in addition to the top and bottom.
    4. A white border has appeared between the edge of the circle and the photo.

    I’ve reverted back to your earlier code. That at least prevents the ugly clipping even if the zoom on hover is incorrect.

    I’ll leave the login active in case you have any further code to try. I do appreciate your ongoing efforts.

    Steven

    April 27, 2017 at 1:44 pm #784008
    Yigit

    Hi Steven,

    For time being i cannot think of anything better than first workaround. However i have noted this thread and let you know if i come up with something else :)

    Best regards,
    Yigit

    April 28, 2017 at 10:34 am #784389
    Steven_Haines

    Many thanks for your efforts. I’m happy with how things are working.

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