Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #817731

    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 (Purchase code hidden if logged out) -safari/”>this thread, without improvement.

    You can see my issue on this site, on Safari.
    Screenshots (Purchase code hidden if logged out) -at-16.05.54.png”>here and (Purchase code hidden if logged out) -at-16.07.00.png”>here.
    Thank you!

    #817895

    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

    #818562

    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 1 year ago by  mverloh.
    #818855

    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

    #818875

    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

    #819174

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

    • This reply was modified 1 year ago by  mverloh.
    #819347

    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

    #819351

    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 (Purchase code hidden if logged out) -at-14.06.21.png”>here

    #819355

    Hey!

    We have released Enfold 4.1 today. Could you please try updating the theme and see if that will help – http://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/ (Purchase code hidden if logged out) -troubles/ in case you have any issues after the update

    Regards,
    Yigit

    #819490

    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.

    #819499

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

    #822730

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

    #828911

    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!

    #831166

    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

    #831422

    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

    #831869

    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

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

You must be logged in to reply to this topic.