Support

Home Forums Event Espresso Premium Calendar problems on Chrome & Safari

Calendar problems on Chrome & Safari

Posted: February 5, 2014 at 1:57 pm


snewkirk

February 5, 2014 at 1:57 pm

Hi, I am having issues with the calendar on just Chrome and Safari. On Firefox and IE it works and looks good, but for some reason not on the other two.

Here is the url: http://beta.trilavie.net/calendar/

I have disabled all plugins except the Event Espresso ones and changed to the 2014 theme, and while the font issue on Chrome disappears the text issue on Safari is still there (screenshot ). This site is built off the “Stark” theme. Perhaps there are multiple conflicts??

WordPress Version:
3.8.1
PHP Version:
5.4.24
MySQL Version:
5.5.35
Event Espresso Version:
3.1.36.4.P

  • This topic was modified 10 years, 2 months ago by  Josh. Reason: removed all the server details


Dean

February 6, 2014 at 1:16 am

Hi,

I checked the calendar in Chrome, Firefox and Safari and they looked identical.

What is the issue exactly please?

Also the screenshot wasn’t linked.


snewkirk

February 6, 2014 at 9:49 am

Oh it must have stripped my image. The issue is the text it shows up in just odd chars. Here is the url of the Safari screenshot: http://beta.trilavie.net/wp-content/uploads/2014/02/safari_issue.jpg

In Chrome the font’s are degrading to a serif font for some reason, but only on the Calendar page and only if the Calendar shortcode is there. If I remove the shortcode it looks great. Here is a screenshot of that: http://beta.trilavie.net/wp-content/uploads/2014/02/chrome_issue.jpg

If you look at any other page of the site in Chrome you can see the difference in the fonts.


Josh

  • Support Staff

February 6, 2014 at 11:39 am

Hi there,

Here is what I’m seeing on Safari.

I’m not seeing any serif fonts, calendar page or not. Can you outline the steps to take to reproduce this so we can investigate further?


snewkirk

February 6, 2014 at 12:05 pm

Well you saw my screen shot of what I am seeing on Safari. There are two separate issues here. The Safari issue is as in the screenshot, the title of the month comes out like with odd charaters as in the screen shot. I did not do any steps to produce this, just installed the plugin and checked it on Safari and the screen shot is what I see no matter what theme I use or plugins I have enabled or disabled.

The serif font issue is only on Chrome, again as shown in my screenshot. I did nothing to produce this, so I can’t tell you a way to re-produce it.


Josh

  • Support Staff

February 6, 2014 at 12:46 pm

I think the serif font issue is a Chrome bug. I see that from time to time on any website. I posted a screenshot of what I see when I view the page in Safari. Without any further info, I’m afraid that there isn’t much else we can do.


Josh

  • Support Staff

February 6, 2014 at 12:53 pm

More info about the Chrome bug can be found here and here.


snewkirk

February 6, 2014 at 2:00 pm

So even though I sent you a screen shot of what I am seeing, because you don’t see the same thing you refuse to help me??

Regarding the “Chrome bug”, if this is a Chrome specific problem then when I remove your calendar shortcode the problem should still be there, but it is not. As soon as I remove the calendar shortcode the problem goes away. Clearly there is an issue beyond this bug. In addition information you linked to on the bug states that “It causes fonts to randomly fall back to the last-resort font, which is normally used when Chrome can’t find any of the fonts in the CSS font-family stack.”, but in my font stack I am using Helvetica, Arial, and clearly it should find those…


Sidney Harrell

February 6, 2014 at 7:10 pm

I believe what Josh said is we need more information. I’ve never known him to refuse to help anyone. Because it’s a problem different in different browsers, it could even be specific to the computer. For example, I can’t see the ‘Oswald’ font of the menu, because I don’t have that font on my computer. I can see the Verdana that is first in the calendar day names, and that is first in the stack of Verdana, Arial, sans-serif.
Are you using a window computer, a Mac, or Linux?


snewkirk

February 6, 2014 at 7:35 pm

Yes I understand that you would not have the “Oswald” font on your computer that is a google font that is being linked in the style sheet. @import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);

This works fine and renders the Oswald font on ALL other pages of the site and in all browsers except on the calendar page. When I remove your calendar shortcode from the page the font once again renders correctly. I am using windows.


Dean

February 7, 2014 at 1:45 am

Hi,

I am also a Windows user. I am only seeing Arial being shown. In some places Arial Narrow.

As such I am assuming that you want the month title of the calendar to be in Arial Narrow? This is an example of it http://take.ms/3Rp3O

If that is the case, you can add some CSS to achieve this

#espresso_calendar:not(.ui-widget) .fc-header-title h2, .fc-header-title h2 {
font-family: 'Oswald', 'Arial Narrow', Arial, san-serif;
}

I see no issues on your Beta site in Safari (in your image you were using a different theme, perhaps that’s relevant?)

If the above is not suitable, can you provide a screen shot of what it should look like please? The screenshots above all seem to show Arial.


snewkirk

February 7, 2014 at 9:37 am

Hi Dean, yes you are only seeing Arial or Arial Narrow because your plugin prevents the google font to be loaded in some way.

The font for the main menu should be Oswald. Arial or Arial Narrow should NEVER be shown on the main menu and are only in my font stack as fail safe defaults. Are you familiar with @import calls? I am trying to be very patient here, but your responses are frustrating me as it seems VERY clear what the issues are here as I have stated and re-stated them multiple times.

On Chrome, the main menu should render in the Oswald font which is in the Google Font repository at google.com/fonts and linked in my stylesheet using an @import call. When you navigate to the calendar page of the site you can see that the main menu does not render in the Oswald font. As you stated all you see is Arial or Arial Narrow. All other pages of the website in Chrome render the Oswald font fine, you ask for a screen shot, but all you have to do is navigate to any other page of the site to see the difference between the Calendar page menu and what it should actually look like. If I remove your [ESPRESSO CALENDAR] shortcode from the page the Oswald font renders fine for the Calendar page.

What is not an issue:
1. I don’t care what font the month title of the calendar renders in. The font for the month title is not an issue here.

2. I am well aware that you don’t see the same issues in Safari as I do. If it looks good to you fine, lets not worry about this.

3. Attributing the Chrome font problem to a known bug is also not an issue. As I stated, when I remove your shortcode from the page the menu immediately renders perfect every time. When I put the shortcode back, the exact same problem occurs.

After extensive testing on my part my conclusion is your program somehow interferes with the @import call for the Google Fonts in some way. I am calling the Oswald font through an @import call to the Google Fonts directory and using a “font-weight:300” to grab the light version of this font, which I have confirmed is available. Removing your program removes the problem immediately.


Josh

  • Support Staff

February 7, 2014 at 10:39 am

Hi there,

Can you let us know which version of Chrome that you’re running? The reason I ask is because the menu items are being rendered with the Oswald typeface on the calendar page when I check in Chrome. Here is a screenshot.


snewkirk

February 7, 2014 at 10:58 am

Hi Josh, I am using the latest version of Chrome. 32.0.1700.107. Here is my screenshot.

Based on your screenshot I assume you are on a Mac? I am using a windows box, and it seems so is your other tech Dean who is seeing the same thing as I am.


Josh

  • Support Staff

February 7, 2014 at 11:26 am

Hi there,

That is a correct assumption. It turns out that the Canary builds of Chrome for Windows have the fix too. You can download then next version of Chrome (canary) from:

https://www.google.com/intl/en/chrome/browser/canary.html

Chrome versions 33 and later have the fix and it should be included in the stable Chrome versions by the end of this month.

Here’s a screenshot of your calendar page running Chrome version 34 on Windows7.


snewkirk

February 7, 2014 at 12:03 pm

Josh, I installed Canary, and yes I can confirm that it fixes the problem. I do like your software which is why I have been so aggressive to find the problem as I want to continue to use it. Thank you for your patience. I can consider this issue resloved!

The support post ‘Calendar problems on Chrome & Safari’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Event Espresso