[Escalated to WPML Developers team] Updating translation causes issues

I have just done another minor edit and the page has corrupted again

It is the html that is getting corrupted

This code

<div class="gb-text gb-text-ace35c65 sav-divider sav-centre"></div>
<p class="gb-text gb-text-457dd1ca sav-intro-text">Herunder kan du se rapporterne, der kan fremstilles på baggrund af testene Wave Professional Styles og Wave Focus Styles.</p>

becomes this:

<div class="gb-text gb-text-ace35c65 sav-divider sav-centre">

<p class="gb-text gb-text-457dd1ca sav-intro-text">Herunder kan du se rapporterne, der kan fremstilles på baggrund af testene Wave Professional Styles og Wave Focus Styles.</p>

See how the closing div is missing above

sorry - this reply
https://wpml.org/forums/topic/updating-translation-causes-issues/?paged=2#post-17721689

I'm sorry I can't replicate the same error in the sandbox site

There are a lot of plugins / things missing though

I can't add any custom css, or js which the page has, nor the gravity form

I'm happy for you to take a duplicator copy from my dev site to look at

what I can reproduce though is that when you edit the Danish page directly in WordPress (not through translation) some of the elements show as having invalid content - as per image below.

I have also uploaded an image of what you see if you click 'resolve'
If shows nested <a> tags which is not what the html is in the English page

If you inspect the html of that element on the front end on the English page it is:

hidden link">FIND OUT MORE

on the Danish page it is

hidden link">hidden link">FIND UD AF MERE

so html is getting corrupted in translation

Could it be the marking of the link in the translation that is causing issues there?

Hi Osama

Thanks for your continued help.

No I can't reproduce it in the sandbox site, but it really isn't the same environment.

I have continued to test in my dev environment.

I have created a minimal page that you can reliably reproduce the error
english
hidden link
danish
hidden link

The issue is the divider line which is a div with no text content

If I look at the code in the posts table for the english and the danish posts of this page I can see the difference in the code which is shown in the two images below:
english-div.png and danish-div.png

See how the english ends with a proper closing div but the danish ends with a just ' />'

The browser doesn't render the danish correctly - it leaves off the closing div
If you open the danish page in the editor then the editor seems to 'auto correct' the closing slash to a proper closing div

So the translation is returning the html with a '/>' on the end instead of a proper closing div

If I actually put text in the div then the translation works correctly and returns with a proper closing div

I have tried this page in the sandbox site but it doesn't cause the error.

So it is odd that the ATE behaves differently on my site and the sandbox site.

I'm hoping this is enough info for your devs to be able to find the problem. To me it seems like an html parse error caused by no text/content in the div.

Thanks Osama

Just one piece of extra info, someone else had a similar issue with a closing div tag being replaced by '/>' in the translated page

More information here
https://wordpress.org/support/topic/wpml-ate-seems-to-break-block-html-self-closing-english-page-layout-co/

and here

https://wpml.org/de/forums/topic/wpml-breaks-layout-on-translated-pages/