I’m aiming to achieve 100/100 on a Google Lighthouse test for my site.
The last issue I need to solve is with regards to duplicate IDs. These are coming from two collection lists on my page. Each collection list uses the same ID for its children.
Please include your site’s Read-Only Share Link with your question.
A read-only link allows the community to view your project without making any edits to it and help diagnose your issue or provide feedback.
If your project has custom code or layout issues on the published site, please share that URI as well.
Thanks for your response, I don’t think this is an issue within Lighthouse though - I can see the IDs are duplicated within the page source and inspector tools.
Alex, you are right. I should have looked at the source instead of relying on your screenshot from lighthouse. Congratulations, you have found a bug. I spent some time trying to replicate your issue.
The Bug:
Webflow, under certain circumstances, adds a shared ID to multiple elements. Webflow should not add the same ID to multiple elements since the ID is a global attribute that must be unique in the whole document according to the spec.
What Triggers It?
My tests show that when a collection list is set to display:grid and the child collection item has an align-self property set, it triggers the bug. Webflow then creates a unique ID which it assigns to all the collection items. You can confirm this by removing the align-self property. Note: this property doesn’t apply to block-level boxes, and to table cells.
Workaround:
Remove the align-self property from your collection item. If you want to center the heading in the box below the image you can use flexbox with display:flex and justify-content:center
Since this is a bug I moved it to the Feedback: Bugs category.