Last active
February 15, 2023 17:05
-
-
Save ocavue/ebee9963dbff92b8c223aa7711346be2 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| <style> | |
| .list { | |
| counter-reset: my-list-counter; | |
| counter-increment: my-list-counter; | |
| position: relative; | |
| margin-left: 40px; | |
| } | |
| .list+.list { | |
| counter-reset: none; | |
| } | |
| .list::before { | |
| position: absolute; | |
| right: 100%; | |
| content: counter(my-list-counter, decimal) '. '; | |
| } | |
| </style> | |
| <script> | |
| function onButtonClick() { | |
| let c = document.getElementById("id_c") | |
| let d = document.getElementById("id_d") | |
| d.parentElement.removeChild(d) | |
| c.appendChild(d) | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <button onclick="onButtonClick()">Click me</button> | |
| <div class="list"> | |
| <p>A</p> | |
| </div> | |
| <div class="list"> | |
| <p>B</p> | |
| </div> | |
| <div class="list" id="id_c"> | |
| <p>C</p> | |
| </div> | |
| <div class="list" id="id_d"> | |
| <p>D</p> | |
| </div> | |
| <div class="list"> | |
| <p>E (this should be 4 after pressing button)</p> | |
| </div> | |
| <div class="list"> | |
| <p>F</p> | |
| </div> | |
| <p>Please check <a href="https://gist.github.com/ocavue/ebee9963dbff92b8c223aa7711346be2">https://gist.github.com/ocavue/ebee9963dbff92b8c223aa7711346be2</a> for more details</p> | |
| </body> | |
| </html> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Description
Chrome cannot display the correct CSS
countervalue after changing the document.Step to reproduce
Open https://gistpreview.github.io/?ebee9963dbff92b8c223aa7711346be2/index.html, you should see a list like this
Click the button
Expected
The div "D" moves as a child of "C", and the counter number for "E" should be 4.
Actual
When open the webpage with Chrome, the counter number before "E" is 2.
Safari and Firefox work fine.
Video
chrome-counter-bug.mp4
Environment