Tagged: ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • April 18, 2016 at 5:01 pm #616671
    kristenangel

    Hello,

    SAFARI—For some reason, text on top of images pulse/jump when the entire masonry element is rolled over. Hover states seem off; multiple names/text are impacted by hover states.

    I’ve found this thread on anti-aliasing, but none of the solutions seem to work for me.
    http://stackoverflow.com/questions/9733011/safari-changing-font-weights-when-unrelated-animations-are-running

    Any suggestions?

    Thanks in advance.

    April 18, 2016 at 5:14 pm #616679
    Yigit

    Hey kristenangel!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .avia-safari .av-inner-masonry-content {
-webkit-transform: translate3d(0, 0, 0);
-webkit-font-smoothing: subpixel-antialiased;
}

    Best regards,
    Yigit

    April 18, 2016 at 5:32 pm #616699
    kristenangel

    Wow – such a quick response! Thanks so much. Works perfectly now.

    April 20, 2016 at 8:51 am #618069
    Rikard

    Hi,

    Great, glad we could help :-)

    Regards,
    Rikard

    November 22, 2016 at 5:50 pm #715468
    Tflores87

    This worked for me as well. Thanks!

    • This reply was modified 8 years ago by Tflores87.
    November 22, 2016 at 6:04 pm #715477
    Tflores87

    That being said, my images look VERY blurry whenever the user Hovers over the image only on Safari (looks fine on Chrome and Firefox). Thoughts?

    November 23, 2016 at 6:49 am #715737
    Rikard

    Hi @Tflores87,

    Could you post a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    November 23, 2016 at 7:00 am #715742
    Tflores87

    Hi, Rikard,

    Thank you for following up! You can find this behavior (most easily seen and most importantly) on my Shop Page (https://kingsdesigns.com/shop/). That being said, you can see it on my Portfolio Page as well (not as easily seen) (https://kingsdesigns.com/gallery/landscape/). This happens on Safari (as far as I have seen).

    November 23, 2016 at 4:15 pm #716024
    Yigit

    Hi,

    I checked your pages on my macbook pro retina and images show up pretty sharp on my end – http://i.imgur.com/b4LBk5N.jpg
    Please flush browser cache and refresh your page a few times – http://wiki.scratch.mit.edu/wiki/Hard_Refresh
    Which version of Safari are you using? Also, can you please post a screenshot and show how it looks on your end?

    Best regards,
    Yigit

    November 23, 2016 at 6:22 pm #716094
    Tflores87

    Thanks for the response, I/we greatly appreciate it!!

    The images do look fairly sharp, it’s when the user hovers over the image that they get very blurry. I will post a video since the quality of the screenshot may not be as apparent. In fact, after reviewing the videos, they are still blurry on HOVER, but the video quality altogether doesn’t look great. Here is the video I created (https://kingsdesigns.com/wp-content/uploads/2016/11/BLurry-Hover.mov). Here is another video on another Mac + Safari (https://kingsdesigns.com/wp-content/uploads/2016/11/Blurry-Images-From-another-Mac-Safari.mov)

    I am using Safari Version 10.0.1 and tried reseting Safari a few times, but the problem persists.

    • This reply was modified 8 years ago by Tflores87.
    November 23, 2016 at 6:45 pm #716110
    kristenangel

    Tflores87,
    I think the fuzziness issue is related to the thumbnail image size that is getting pulled in your gallery grid/element. Try changing the size of the Thumbnail that gets pulled and see if that helps.

    November 23, 2016 at 7:23 pm #716127
    Tflores87

    Thank you, Kristenangel, I will check! I wonder why it only happens for Safari, though.

    December 15, 2016 at 1:21 am #724705
    Tflores87

    Hi Yigit, I wanted to check with you and see if you had any luck? The image hovers are still blurry for Safari users.

    December 19, 2016 at 6:24 am #725952
    Ismael

    Hi!

    I’m not sure why it looks blurry on safari. Please try this css code.

    .avia-safari .av-masonry-entry:hover .av-masonry-image-container {
    -webkit-backface-visibility: initial !important;
    -webkit-transform-origin: 50% 50%;
}

    Regards,
    Ismael

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