This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

SPA angular site stop working with new version of Firefox

  • 2 replies
  • 1 has this problem
  • 130 views
  • Last reply by falu

falu
falu
more options

https://www.puticollege.com/welcome was working fine with version 82 of firefox. When I upgrade to 93.0, this page has a big solid blue box where more html should be shown after a page. No error in console log, not sure what's going on.

It still works fine in latest chrome.

Please help.

https://www.puticollege.com/welcome was working fine with version 82 of firefox. When I upgrade to 93.0, this page has a big solid blue box where more html should be shown after a page. No error in console log, not sure what's going on. It still works fine in latest chrome. Please help.

Chosen solution

Hi, are you the developer?

Firefox seems to have a problem with this nesting of flex elements:

<div class="list d-flex flex-row overflow-hidden" _ngcontent-uai-c8="">   <div _ngcontent-xub-c8="" class="row">...</div> </div>

The d-flex flex-row classes apply these rules to the featured class list: 

.d-flex {
 display:flex!important
}
.flex-row {
 flex-direction:row!important
}


The row class uses the default flex-direction of row as well.

In Firefox, this combination is causing the content that usually appears in two columns to go haywire with crazy widths and negative widths. I don't know whether this is a bug or is in compliance with the spec, but either way, it's not helpful.

You can file a bug on https://bugzilla.mozilla.org/

If it's your site, can you remove the d-flex class so there are not nested flex elements?

Read this answer in context 👍 1

All Replies (2)

jscher2000 - Support Volunteer
jscher2000 - Support Volunteer
  • Top 10 Contributor
more options

Chosen Solution

Hi, are you the developer?

Firefox seems to have a problem with this nesting of flex elements:

<div class="list d-flex flex-row overflow-hidden" _ngcontent-uai-c8="">   <div _ngcontent-xub-c8="" class="row">...</div> </div>

The d-flex flex-row classes apply these rules to the featured class list: 

.d-flex {
 display:flex!important
}
.flex-row {
 flex-direction:row!important
}


The row class uses the default flex-direction of row as well.

In Firefox, this combination is causing the content that usually appears in two columns to go haywire with crazy widths and negative widths. I don't know whether this is a bug or is in compliance with the spec, but either way, it's not helpful.

You can file a bug on https://bugzilla.mozilla.org/

If it's your site, can you remove the d-flex class so there are not nested flex elements?

falu
falu Question owner
more options

Thanks so much. It's a bad code for us, we removed unintended d-flex flex-row class attributes and everything works fine now. As you suggested, I also filed https://webcompat.com/issues/92024 as you suggested. Thanks!