Collection list uses the same ID

Hello there,

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.

Is there anyway I can solve this?

Thanks
Alex

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 the tip :slight_smile:

https://preview.webflow.com/preview/alexed?utm_medium=preview_link&utm_source=designer&utm_content=alexed&preview=662d3c5c5ece6dc964ea1ac4d1fc26c0&mode=preview

Which page are you getting the error on?

If you run a Google Lighthouse audit on the homepage, with only “Accessibility” and “Desktop” selected, you should see it flagged.

That is a bug in lighthouse. Your ID’s are unique. I would file a bug report with the lighthouse team.

EDIT: Issue is with Webflow see my post below.

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.

Thanks Webdev - your workaround, worked around perfectly :slight_smile:

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.