Tagged: ,

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • July 7, 2017 at 10:35 am #817731
    Maike

    Hi,

    I have an issue with the Image Hover Effect ( ‘Yes, slightly increase the image size’ ) on SAFARI.
    The effect is fine on firefox & Chrome, but shows unexpected results on Safari – the image does not increase INSIDE the circle, but beyond the circle, and gets cropped in a square shape.
    I have followed all the suggestions in this thread, without improvement.

    You can see my issue on this site, on Safari.
    Screenshots here and here.
    Thank you!

    July 7, 2017 at 3:45 pm #817895
    Victoria

    Hey mverloh,

    This code will make colored overlay disappear, but the behavior will be the same in Chrome and Safari.

    
.av-styling-circle .avia_image {
        z-index: -1;
}

    Best regards,
    Victoria

    July 10, 2017 at 6:50 am #818562
    Maike

    Hi Victoria,

    thanks for taking a look, but making the colored overlay disappear is not at all what I am looking for.
    I want to change the weird cropping when increasing the images – did you look at the screenshots?

    Just a guess – but would there be a way to set the mask (i.e. the white area surrounding the image in a circle) to be the top layer? or is this not how it works?

    Thanks!

    • This reply was modified 7 years, 3 months ago by Maike.
    July 10, 2017 at 4:48 pm #818855
    Victoria

    Hi mverloh,

    I know it might not have been the solution you we looking for, but it was the one I could come up with. I’ll ask my colleagues to have a look.

    Best regards,
    Victoria

    July 10, 2017 at 5:10 pm #818875
    Yigit

    Hi,

    I tried on my local installation and following code works fine for me

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

    If that still does not work for you, please create a temporary admin login and post it here privately so we can look into it :)

    Best regards,
    Yigit

    July 11, 2017 at 9:18 am #819174
    Maike

    Log In below – unfortunately that did not work for me on safari yet (yes, I did empty the cache :-) )

    • This reply was modified 7 years, 3 months ago by Maike.
    July 11, 2017 at 1:56 pm #819347
    Yigit

    Hi,

    We have browser detection script which appends browser name in source code however it is missing on Safari on your installation

    I added following code to functions.php file of your child theme

    add_filter( 'body_class', function( $classes ) {
global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
	if($is_safari) { 
		$classes = array_merge( $classes, array( 'avia-safari' ) );
	}
    return $classes;
});

    And following one to style.css file of your child theme

    .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; 
}

    Please flush browser cache and review your website

    Best regards,
    Yigit

    July 11, 2017 at 2:14 pm #819351
    Maike

    Hi Yigit,

    thanks a million, I would never have found that missing script…
    Just tried the result – the cropping is gone, but sadly there is a new strange look now (sigh): both the overlay and the image have borders now image has a grey thin line with some margin, the overlay has a semi transparent white border), and the image is enlarging (instead of just zooming in inside the initial circle, while the overlay stays the same size…
    :(
    Again, only on safari. Firefox looks just the way it should
    Sorry for the trouble… screenshot here

    July 11, 2017 at 2:20 pm #819355
    Yigit

    Hey!

    We have released Enfold 4.1 today. Could you please try updating the theme and see if that will help – kriesi.at/documentation/enfold/updating-your-theme-files/?

    You can check out change log here – http://kriesi.at/documentation/enfold/enfold-changelog/ and see this thread – https://kriesi.at/support/topic/enfold-version-4-1-update-troubles/ in case you have any issues after the update

    Regards,
    Yigit

    July 11, 2017 at 4:31 pm #819490
    Maike

    Hi,
    I have updated – and the safari circles and weird look stay the same.

    If there is no other fix I would be fine with just displaying the overlay without the increasing size of the image. But on the last image (third row) where I have deactivated the increase I do still see a square appearing for a sec when exiting the hover area.

    Unfortunately, I have also noticed that after the update the mobile menu (that is supposed to be displayed when scrolling down on both desktop and mobile screens) has completely disappeared now, on all browsers). But I guess that’s a new thread?!
    Thanks for your support.

    July 11, 2017 at 4:39 pm #819499
    Maike

    PS: On mobile screens the grey circle around the image appears on 2 out of 11 images…

    July 17, 2017 at 4:32 pm #822730
    Maike

    Hi Kriesi Team,
    sorry, but your code and the latest update did still not fix the issue.

    All I want to achieve is displaying the images in Safari just like in Firefox – where it absolutely looks the way it should.
    At this point, on Safari ONLY (did not check explorer), I still have the following issues:

    1) the images are increasing BEYOND the circle boundaries (obviously I want it to increase inside the initial circle)
    2) the overlay does NOT increase accordingly
    3) with the code you added the image has a grey border / shadow, the overlay has a white border on hover. I can hide those by commenting the line you have added /* box-shadow: 0 0 0 3px white, 0 0 0 4px #999; */ – but it makes me wonder what the line was intended for?!
    4) the behavior of the images on mobile screens (iphone 5 , BOTH Safari and Firefox) is not consistent either – the image overlay is white (instead of the color generally chosen for Linked Image Overlay in the Enfold Child Theme Options, or the individual colors defined by the assigned css classes0, and for whatever reason 2 out of 11 images are increasing on touch / hover, and 9 are not (as far as I can tell tose 2 images do not have the same CSS class; it is the 7th image and the 9th image)

    If we could AT LEAST fix # 1 on the list I’d be happy to move on… THANK YOU!

    Please help me fix this, so we can finally finish the site!
    Thanks!!!

    July 24, 2017 at 9:20 am #828911
    Maike

    Hi again,
    apparently I do not get feedback on this support thread anymore – do I have to open a fresh one?
    still the same issue on safari (desktop); the images are increasing BEYOND the circle boundaries (obviously I want it to increase inside the initial circle.
    Plus: Color overlay does not work on iOs, in the theme settings the default image overlay color is set to magenta, on ipad & iphone it is displayed as white.
    Thanks for your time!

    July 28, 2017 at 5:13 pm #831166
    Yigit

    Hi,

    I am so sorry for the very late reply!
    I changed custom CSS code to following one

    .avia-safari .av-hover-grow:hover img { -webkit-transform: translateZ(0); } 
.avia-safari .av-styling-circle.av-hover-grow,.avia-safari .av-styling-circle.av-hover-grow * {
 overflow: hidden; 
 border-radius: 1000px!important;
}

    The issue with this current solution is that it does not grow on hover on Safari. I will report this issue to our devs and we will include a patch in upcoming Enfold update. Sorry for the inconvenience!

    Best regards,
    Yigit

    July 29, 2017 at 10:15 am #831422
    Maike

    Hi Yigit,
    thank you, that will do for the moment!
    So when the update happens I will probably have to remove the code again, right?
    Best greetings

    July 30, 2017 at 6:20 pm #831869
    Yigit

    Hi,

    Yes, that code will not be necessary once our devs include a fix in upcoming updates.
    Sorry once again, hopefully we will be able to provide you better solutions in future in case you have any questions or issues :)

    Best regards,
    Yigit

    September 5, 2019 at 5:05 pm #1134518
    leahmessina

    Hi,

    I have a similar issue. We do not have any grow effect on, but we have linked images so they naturally have a grey overlay on hover. The problem we have on safari is this: Our images are styled to be circles but on safari, the grey overlay first overlays the square and then crops to the circle. Almost like safari is slow on the uptake for the styling.

    This issue does not occur on firefox or chrome

    September 10, 2019 at 6:07 am #1136364
    Ismael

    Hi,


    @leahmessina    : We replied to your thread here: https://kriesi.at/support/topic/image-overlay-on-hover-issue-safari/#post-1136331

    Please continue there. We’ll close this thread for now.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘Image increase on hover effect – safari’ is closed to new replies.