Clock stopped showing Hands

Hello @markva

Thank you for the support topic, Can you please share more information using screenshots or video screen recording of before and after behavior using service like recordit

please share if you are using any plugin to display clocks, additionally please send your site health information using this form in case you are still on 2.1.4 or Use the support section on 2.2 and click send Data button and share the UUID it generates with us on the support forums here.

Hi Milind, and thanks for your response!

I have created 2 minimal test sites to show you the difference between the old and the new AMP plugin version.

AMP Plugin Version 2.1.4
https://kolmok.xyz/v214

View post on imgur.com

As you can see, the analog clock has the hands in the correct position for 21:50

AMP Plugin Version 2.2.0:
https://24horas.app/v220

View post on imgur.com

As you can see here , the analog clock has the hands NOT in the correct position for 21:50, it has the hands in the initial position.

To show the clock I use custom code, not a plugin. The code is in functions.php, and calculates the hand positions at the time the browser loads the page.

As you can see in the following screenshots, the sites use the same plugins / configuration.

View post on imgur.com

View post on imgur.com

I have also filled in and submitted the form (https://docs.google.com/forms/u/0/d/e/1FAIpQLSfHk32DRaYLgYO3MMg002_wYKqeWJAvHvj-EoSFWOFyDH6ncw/formResponse)

I consider plugin version 2.2.0 the “live” one.

Thanks and kind regards,
Mark

Hello @markva

Thank you for the additional information, We notice difference between two clocks

SVG image has hour and minute paths that are not being wrapped up

v2.1.4

<g id="hour" data-amp-original-style="transform: rotate(655deg)" class="amp-wp-494d610">
	<path class="hour-arm" d="M300.5 298V162"></path>
	<circle class="sizing-box" cx="300" cy="300" r="253.9"></circle>
</g>

and v2.2

<g id="hour" data-amp-original-style="transform: rotate(655deg)" class="amp-wp-494d610"></g>
<path class="hour-arm" d="M300.5 298V162"></path>
<circle class="sizing-box" cx="300" cy="300" r="253.9"></circle>

As you will notice that for 2.1.4 it’s wrapping <path> (which should be inside <g>) for clock hands in <g> tag while 2.2.0 it’s not wrapping them (they are outside<g> tag)

for primary investigation please verify that code generating clocks (SVG images) has closing tags for each opening tag.

As you mentioned it’s custom code so we can’t be sure about the issue until we check the code.

Hope this is helpful!

Thanks a lot!

I have been able to solve the issue by moving the code to one line, as opposed to four:

<g id=”hour” style=”transform: rotate(‘.$hrPosition.’deg)”><path class=”hour-arm” d=”M300.5 298V162″/><circle class=”sizing-box” cx=”300″ cy=”300″ r=”253.9″/></g>

It used to be:
<g id=”hour” style=”transform: rotate(‘.$hrPosition.’deg)”>
<path class=”hour-arm” d=”M300.5 298V162″/>
<circle class=”sizing-box” cx=”300″ cy=”300″ r=”253.9″/>
</g>

Hello @markva

That’s great! thank you for sharing the solution with us!!

I’ll mark this as resolved Open a new support topic if you face further issues, also feel free to leave a plugin review, we would love to hear your feedback.