Countdown not working on Apple devices

[danhite]

I've had a problem with one of my pages locking up for some Apple devices when I show a countdown timer. Here examples of some UserAgent strings from my weblog (users who had the problem):

_Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.1 Safari/603.1.30 Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/602.2.14 (KHTML, like Gecko) Version/10.0.1 Safari/602.2.14 Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/602.3.12 (KHTML, like Gecko) Version/10.0.2 Safari/602.3.12 Mozilla/5.0 (iPad; CPU OS 102 like Mac OS X) AppleWebKit/602.3.12 (KHTML, like Gecko) Version/10.0 Mobile/14C92 Safari/602.1

My page is an ASP.NET WebForms page and the timer contained in an ASP.NET Panel control (renders as a DIV when the panel's .NET Display property is set to True). The panel with the timer is not displayed initially. It's only after the user clicks submit button that the panel is made visible from a post-back handler in the .NET page's code-behind.

Here's the code on the page relevant to TimeCircles:

<script type="text/javascript">
    $(document).ready(function () {
        $(".divTimer").TimeCircles({
            start: true,
            count_past_zero: false,
            "animation": "smooth",
            "bg_width": 1.2,
            "fg_width": 0.10333333333333333,
            "circle_bg_color": "#60686F",
            "time": {
                "Days": {
                    "text": "Days",
                    "color": "#FFCC66",
                    "show": false
                },
                "Hours": {
                    "text": "Hours",
                    "color": "#99CCFF",
                    "show": false
                },
                "Minutes": {
                    "text": "Minutes",
                    "color": "#BBFFBB",
                    "show": false
                },
                "Seconds": {
                    "text": "Seconds",
                    "color": "#99CCFF",
                    "show": true
                }
            }
        });

        $(".divTimer").TimeCircles().addListener(function (unit, amount, total) {
            if (total < 1) {
                //Wait one second and then click submit button. If we don't wait one second, the timer appears to stop at 1 instead of zero.
                setTimeout(function () { document.getElementById('<%=btnSubmit.ClientID%>').click(); }, 1000);
            }
        });
    });

The div for the timer (inside the ASP.NET Panel):

<asp:Button ID="btnShowAnswers" runat="server" Text="Show Answers" /><br />
<asp:Panel ID="pnlTimer" runat="server" Visible="false">
   You have 30 seconds to submit your answer<br />
   <div class="divTimer" data-timer="31" style="width: 20%;margin: 0 auto;"></div>
   <asp:RadioButtonList ID="rblVerifiyId" runat="server" CssClass="radioWithProperWrap" />
   <br />
   <asp:Button ID="btnVerifiIdSubmit" runat="server" Text="Submit Answer" 
   UseSubmitBehavior="false" OnClientClick="this.disabled='true'; $('.divTimer').TimeCircles().stop();" />
</asp:Panel>

The page initially works fine before the Panel containing the timer is displayed. But when the Panel containing the timer is displayed (from a postback handler in the page's the code-behind file), the panel's content is displayed but the timer graphics do not show. Also, the page locks up.

Your demo (http://git.wimbarelds.nl/TimeCircles/index.html) works fine for the users that are having this problem on my site. Any idea what I need to change?

Thanks! Dan

[wimbarelds]

Unfortunately I personally do not own a mac, so it's hard for me to determine what is going on.

Can you:

1. Show me a page where this issue exists?
2. Ask users with tthis issue to "check console" (right click on the page, click inspect element, choose the console tab) and tell me any messages they see in console?

[danhite]

Unfortunately, this is a page on our website that is only available to doctors who are in our program. It isn’t a page available to the public. Also, the browser completely locks up. The mouse pointer turns into a “spinning beach ball” icon (busy).

I’ve gotten hold of a Mac to test on so maybe I’ll be able to figure it out myself. If I do I’ll post the solution.

Dan

From: wimbarelds [mailto:notifications@github.com] Sent: Wednesday, May 10, 2017 1:56 PM To: wimbarelds/TimeCircles Cc: danhite; Author Subject: Re: [wimbarelds/TimeCircles] Countdown not working on Apple devices (#127)

Unfortunately I personally do not own a mac, so it's hard for me to determine what is going on.

Can you:

1. Show me a page where this issue exists?

2. Ask users with tthis issue to "check console" (right click on the page, click inspect element, choose the console tab) and tell me any messages they see in console?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/wimbarelds/TimeCircles/issues/127#issuecomment-300579857 , or mute the thread https://github.com/notifications/unsubscribe-auth/Aa_6OJL1zkOcMcQUm34KdaRIG07H_94fks5r4ggxgaJpZM4NOeZZ . https://github.com/notifications/beacon/Aa_6OJo7lOYqgc544zk9S_eSYayP-exzks5r4ggxgaJpZM4NOeZZ.gif

[danhite]

Here's one thing I've found. On my count-down page, I'm only displaying the seconds counter:

If I turn the Minutes timer on, it works. But I don't want to show the minutes timer...

[wimbarelds]

That is quite strange but interesting. Can you maybe set up a demo page (on a public URL) where you can reproduce this problem? I might be able to borrow a macbook for a little bit, but for that to be useful I do need to at least have an example of a page where this problem exists.

[danhite]

http://www.danhite.com/TimeCirclesDemo/default.htm

Here are the two strange things I've found. First off, it happens that the TimeCircles div is inside a table's TD and the table is inside a styled div:

If I change the width to 65% (or for that matter remove the styling from that div altogether) the problem goes away. Second, if I set the show property for Minutes to true the problem goes away. Again, the problem only appears on Macintosh computers running the version 10.10.5 of the Mac OS (Yosemite) and using the Safari browser (version 10). A user running OS 10.11 ("El Capitan") or 10.12 ("Sierra") does not experience the problem. You would think that the problem would be tied to the browser version but it appears to be tied to the OS version!

[danhite]

I put up the page at your request a week ago. If you need more time to look at it I understand. Otherwise I'll take it down. Let me know.

[wimbarelds]

Hey there, sorry I wasn't able to borrow a macbook this week for testing :( Hopefully I'll get a hold of one next week from a colleague, but unfortunately I can't promise that.

2017-05-19 15:14 GMT+02:00 danhite notifications@github.com:

I put up the page at your request a week ago. If you need more time to look at it I understand. Otherwise I'll take it down. Let me know.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/wimbarelds/TimeCircles/issues/127#issuecomment-302699407, or mute the thread https://github.com/notifications/unsubscribe-auth/ACd-310aYYciPzs43oIQFwUIxWDvixuNks5r7ZWYgaJpZM4NOeZZ .