SPA angular site stop working with new version of Firefox
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 👍 1All Replies (2)
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?
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!