-
AuthorPosts
-
July 7, 2017 at 10:35 am #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 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 #817895Hey 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,
VictoriaJuly 10, 2017 at 6:50 am #818562Hi 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, 5 months ago by Maike.
July 10, 2017 at 4:48 pm #818855Hi 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,
VictoriaJuly 10, 2017 at 5:10 pm #818875Hi,
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,
YigitJuly 11, 2017 at 9:18 am #819174Log In below – unfortunately that did not work for me on safari yet (yes, I did empty the cache :-) )
- This reply was modified 7 years, 5 months ago by Maike.
July 11, 2017 at 1:56 pm #819347Hi,
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,
YigitJuly 11, 2017 at 2:14 pm #819351Hi 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 hereJuly 11, 2017 at 2:20 pm #819355Hey!
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,
YigitJuly 11, 2017 at 4:31 pm #819490Hi,
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 #819499PS: On mobile screens the grey circle around the image appears on 2 out of 11 images…
July 17, 2017 at 4:32 pm #822730Hi 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 #828911Hi 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 #831166Hi,
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,
YigitJuly 29, 2017 at 10:15 am #831422Hi 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 greetingsJuly 30, 2017 at 6:20 pm #831869Hi,
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,
YigitSeptember 5, 2019 at 5:05 pm #1134518Hi,
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 #1136364Hi,
@leahmessina: We replied to your thread here: https://kriesi.at/support/topic/image-overlay-on-hover-issue-safari/#post-1136331Please continue there. We’ll close this thread for now.
Best regards,
Ismael -
AuthorPosts
- The topic ‘Image increase on hover effect – safari’ is closed to new replies.