Responsive fonts are blurry in Safari & Chrome on Mac

Hi there,

When I view this page and make the window smaller in Safari & Chrome on Mac, there are moments when the fonts are blurry then they sharpen up.

However, in Firefox, they are fine.

Is there a way to increase the font-weight or the font size in mobile at least?

Let me know and thanks.

It could be a setting on your browser as I'm unable to replicate it on Safari 11.8 on Mac High Sierra OS.

If you want the font to be sharper, try to go to Edit > Preferences > Apperance > Font Smoothing and set your desired level.

I hope this helps. Let us know if you have any questions or if you need further assistance. 

Hey Jed,

I already have "font smoothing" activated in my system preferences. I have High Sierra and only Safari 11.1.2. How do you get 11.8? Is there a way to make that description text larger?

Anyway, I seem to be having a conflict with the WordPress Divi theme and Jotform's modal lightbox popup code on this page. When I activate the area with the GET IN TOUCH button that you see, the header disappears (see working header on this page) and I get JavaScript errors in Console:

See the JS error here

It's points to a JS issue in this core Divi file:

http://dev.hallofframes.com/wp-content/themes/Divi/js/custom.js?ver=3.13

When I hide the GET IN TOUCH modal lightbox popup area, the header displays fine.

Can you help with this? We really want the lightbox modal popup option.

Thanks for your help.

Also, try moving your Safari window inwards to see it respond then you'll see the text flipping between blurry and sharp. It subtle but it's there.

Sorry, it was 11.1 not 11.8. The rendering of the font is controlled by a browser not by Jotform.

When moving the Safari window inwards to its smallest size, I see the text changes. Again, this change is done automatically by Safari. Unless our dev team have access to the Safari's source code, they might be able to help but you know that is not possible because it is a closed source.

As for the conflict, please try embedding the script below and see if that helps (remove the old embed code).

<script type="text/javascript">  $.noConflict();</script>

<script src ="https://form.jotform.com/static/feedback.js" type="text/javascript"></script><script type="text/javascript">

        var JFL_72264805867163 = new JotformFeedback({

          formId: '72264805867163',

          base: 'https://form.jotform.com/',

          windowTitle: 'General Inquiry Form',

          background: '#cb0901',

          fontColor: '#FFFFFF',

          type: '2',

          height: 500,

          width: 700,

          openOnLoad: false

        });

</script>

Let us know how it goes.

Hi Jed,

Okay, that seems to allow the header in but

Please try adding "?nojump" at the end of the form ID:

 formId: '72264805867163?nojump',

Okay, that doesn't work at all and has nullified the function on this page:

<script type="text/javascript"> $.noConflict();</script>
<script src ="https://form.jotform.com/static/feedback.js" type="text/javascript"></script><script type="text/javascript">
 var JFL_72264805867163 = new JotformFeedback({
 formId: '72264805867163?nojump',
 base: 'https://form.jotform.com/',
 windowTitle: 'General Inquiry Form',
 background: '#cb0901',
 fontColor: '#FFFFFF',
 type: '2',
 height: 500,
 width: 700,
 openOnLoad: false
 });
</script>

Did I do it right?

Please revert my suggestion, I will move this issue to a separate thread, and escalate it to our back-end team to get further help. Please follow up here: https://www.jotform.com/answers/1571522- 

I have reverted it so it jumps up now once clicked.

Thanks.