[Safari] If two centered tables are positioned one below the other, aligning the upper table to the right temporarily misplaces the bottom table

[charlttsie]

📝 Provide detailed reproduction steps (if any)

1. Open e.g. all-features.html on Safari
2. Set editor data to:

<figure class="table"><table style="background-color:rgb(230, 230, 230);border:2px solid rgb(0, 0, 0);"><tbody><tr><td style="text-align:center;"><span class="text-big"><strong>Service</strong></span></td><td style="text-align:center;"><span class="text-big"><strong>Preview</strong></span></td><td style="text-align:center;"><span class="text-big"><strong>URL</strong></span></td></tr><tr><td style="text-align:center;"><u>YouTube</u></td><td><figure class="media"><oembed url="https://www.youtube.com/watch?v=ZVv7UMQPEWk"></oembed></figure></td><td><a href="https://www.youtube.com/watch?v=ZVv7UMQPEWk"><span class="text-small">https://www.youtube.com/watch?v=ZVv7UMQPEWk</span></a></td></tr><tr><td style="text-align:center;"><u>Vimeo</u></td><td><figure class="media"><oembed url="https://vimeo.com/1084537"></oembed></figure></td><td><a href="https://vimeo.com/1084537"><span class="text-small">https://vimeo.com/1084537</span></a></td></tr></tbody></table></figure><figure class="table"><table style="border:2px dashed rgb(153, 153, 153);"><tbody><tr><td style="text-align:center;"><span class="text-big"><strong>Language</strong></span></td><td style="text-align:center;"><span class="text-big"><strong>Code snippet</strong></span></td><td style="text-align:center;"><span class="text-big"><strong>Language</strong></span></td><td style="text-align:center;"><span class="text-big"><strong>Code snippet</strong></span></td></tr><tr><td style="text-align:center;vertical-align:top;">CSS</td><td style="vertical-align:top;"><pre><code class="language-css">body {\n\tcolor: red;\n}\n\np {\n\tfont-size: 10px;\n}</code></pre></td><td style="text-align:center;vertical-align:top;">PHP</td><td style="vertical-align:top;"><pre><code class="language-php">&lt;?php\n\nfunction dump( array ...$args ) {\n\tforeach ( $args as $item ) {\n\t\tvar_dump( $item );\n\t}\n\n\tdie;\n}</code></pre></td></tr><tr><td style="text-align:center;vertical-align:top;">JavaScript</td><td style="vertical-align:top;"><pre><code class="language-javascript">function foo() {\n\tconsole.log( 'indented using 1 tab' );\n}\n\nfunction bar() {\n    console.log( 'indented using spaces' );\n}</code></pre></td><td style="text-align:center;vertical-align:top;">Plaintext</td><td style="vertical-align:top;"><pre><code class="language-plaintext">Plain text</code></pre></td></tr></tbody></table></figure>

3. Click on the upper table and open table properties
4. Choose the "Align table to the right with text wrapping" option
5. Hover over or click on the other table

✔️ Expected result

The tables don't overlap and are positioned next to each other

❌ Actual result

The tables initially overlap. After step 5, the table that was previously positioned at the bottom jumps to its target position:

https://github.com/user-attachments/assets/9142632f-a5d3-4638-a62c-8ca69afca265

📃 Other details

• Browser: Safari
• OS: MacOS

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[kubaklatt]

Probably the core of the problem is the same, but on iOS, when aligning the table to the left, the table flows outside the editor, and only clicking on it brings it back to the place where it should be.

https://github.com/user-attachments/assets/33fe2edc-3e81-4b4b-b672-497a7d8db1c3