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.
Thread Starter
markva
(@markva)
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!
Thread Starter
markva
(@markva)
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.
