Targeting Ember CSS IDs results in weird behavior

Product Support

AI-generated summary

A user reports that directly navigating to a sub-category page via URL in Firefox or Edge causes a broken page due to a CSS issue, while navigating from the main category page works fine. LilTrashPanda identifies the problem as a CSS rule targeting an Ember-generated ID (#ember960) which overrides the background color. cpradio advises removing the rule and warns against using unstable Ember IDs in CSS, as they are not guaranteed to remain consistent. LilTrashPanda thanks for the fix.

1

When navigating directly to a sub-category page via URL on Firefox or Edge (doesn’t seem to impact Chrome), it results in a broken page. Example URL: http://talk.readyatdawn.com/c/deformers/techsupport

2017-04-07 21_03_08-Latest TECH SUPPORT topics - Ready At Dawn.png1143×651 96.1 KB

However, when navigating to that same page from the Category page first, it seems to work fine. Example URL: http://talk.readyatdawn.com/c/deformers (now click on “Tech Support” and view the page).

2017-04-07 21_03_49-Latest TECH SUPPORT topics - Ready At Dawn.png1139×565 323 KB

Not sure if this is something I’ve screwed up in CSS (if it is, any pointers on how to fix this would be super helpful).

Thanks!

2

You need to delete this CSS rule

body.category-deformers-techsupport #ember960

As it is overriding the background color to be #f4f4f4, which is white-washing it

Also, you should not use any #ember... ids in your CSS rules, as those IDs are not guaranteed. Thus why it only happens when directly visiting the page versus navigating to it.

3

Perfect, thanks for the help!