lume.io - Page does not fully load #88484
Comments
webcompat-bot
added
browser-fenix
engine-gecko
softvision-raul-bucata
added
severity-critical
softvision-raul-bucata
changed the title
|
@emilio We appreciate your report. I was able to reproduce the issue. The page does not fully load, making the logo and the burger menu not available:
Tested with: Notes:
Moving this to NeedsDiagnosis for further investigations. |
|
Seems like poor UA sniffing (if I use Chrome's UA string then it renders fine). On desktop, the menu is mispositioned. That is a Chrome bug :-( |
|
with Firefox UA. with Chrome UA on Firefox. They are also running Vue framework in development mode. This seems related to a constraint set through user agent sniffing on loading the packages. Also another interesting note is that the site seems to be responsive and if I make the window small on Firefox, the site displays. The menu is also not accessible on firefox desktop. @trusktr seems to be the creator of @lume And it seems to be still maintained. |
|
Hello, thanks for mentioning me! This is a really great effort here in this repo. This is interesting. If I understand correctly, there is a CSS space-toggle incompatibility between FF and Chrome (causing the menu misalignment), which is webcompat related @James0x57 (aka @propjockey, the person who brought CSS space toggles to the light) can you please confirm what's happening with that first bullet point in Desktop FF? (inspect the top right menu, and the As for the "Cannot find module" and "undefined" errors, those were due to Meteor serving the legacy build (it expects to import babel/runtime and polyfill some things) to the client based on user-agent sniffing. Apparently Meteor erroneously thinks FF 94 is a legacy browser. I listed a workaround in meteor/meteor#11668. |
|
@trusktr the page loads fine for me in FF Nightly (94) and the misalignment in desktop view can be fixed with @emilio here's a minimal test case to reproduce the alignment issue in FF |
|
Thanks for that reduced test-case! It seems for the purposes of auto margins, Firefox is using percentageness to resolve the margin to zero, but Chrome only does it if the value is actually a percentage (if you do I believe this is a Chrome/WebKit bug, but I'll double-check. cc @dholbert |
|
So they're resolving the margin with a zero basis, rather than just treating the margin as a whole as zero... |
|
Ok, this is a Firefox bug after all, see https://bugzilla.mozilla.org/show_bug.cgi?id=1733952 and the explanation incoming in the patch. |
…sis rather than just resolving to zero if there's a percentage. This matches other browsers, the spec (https://drafts.csswg.org/css-sizing/#cyclic-percentage-contribution): For the min size properties, as well as for margins and paddings (and gutters), a cyclic percentage is resolved against zero for determining intrinsic size contributions. And also what we do in SizeComputationInput::Compute{Margin,Padding}: https://searchfox.org/mozilla-central/rev/75e9d727ce5ba2c14653cf8fb0f1367f085271b7/layout/generic/ReflowInput.cpp#2811-2832 https://searchfox.org/mozilla-central/rev/75e9d727ce5ba2c14653cf8fb0f1367f085271b7/layout/generic/ReflowInput.cpp#2861-2868 This fixes a compat issue with the menu alignment in lume.io: webcompat/web-bugs#88484 (comment) It's also simpler. Differential Revision: https://phabricator.services.mozilla.com/D127441 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1733952 gecko-commit: 1fd26f24025c3dcb4de967ee8bdc8a0ca9079e78 gecko-reviewers: jfkthame
… percentage basis rather than just resolving to zero if there's a percentage. r=jfkthame This matches other browsers, the spec (https://drafts.csswg.org/css-sizing/#cyclic-percentage-contribution): For the min size properties, as well as for margins and paddings (and gutters), a cyclic percentage is resolved against zero for determining intrinsic size contributions. And also what we do in SizeComputationInput::Compute{Margin,Padding}: https://searchfox.org/mozilla-central/rev/75e9d727ce5ba2c14653cf8fb0f1367f085271b7/layout/generic/ReflowInput.cpp#2811-2832 https://searchfox.org/mozilla-central/rev/75e9d727ce5ba2c14653cf8fb0f1367f085271b7/layout/generic/ReflowInput.cpp#2861-2868 This fixes a compat issue with the menu alignment in lume.io: webcompat/web-bugs#88484 (comment) It's also simpler. Differential Revision: https://phabricator.services.mozilla.com/D127441
…sis rather than just resolving to zero if there's a percentage. This matches other browsers, the spec (https://drafts.csswg.org/css-sizing/#cyclic-percentage-contribution): For the min size properties, as well as for margins and paddings (and gutters), a cyclic percentage is resolved against zero for determining intrinsic size contributions. And also what we do in SizeComputationInput::Compute{Margin,Padding}: https://searchfox.org/mozilla-central/rev/75e9d727ce5ba2c14653cf8fb0f1367f085271b7/layout/generic/ReflowInput.cpp#2811-2832 https://searchfox.org/mozilla-central/rev/75e9d727ce5ba2c14653cf8fb0f1367f085271b7/layout/generic/ReflowInput.cpp#2861-2868 This fixes a compat issue with the menu alignment in lume.io: webcompat/web-bugs#88484 (comment) It's also simpler. Differential Revision: https://phabricator.services.mozilla.com/D127441 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1733952 gecko-commit: 1fd26f24025c3dcb4de967ee8bdc8a0ca9079e78 gecko-reviewers: jfkthame
… percentage basis rather than just resolving to zero if there's a percentage. r=jfkthame This matches other browsers, the spec (https://drafts.csswg.org/css-sizing/#cyclic-percentage-contribution): For the min size properties, as well as for margins and paddings (and gutters), a cyclic percentage is resolved against zero for determining intrinsic size contributions. And also what we do in SizeComputationInput::Compute{Margin,Padding}: https://searchfox.org/mozilla-central/rev/75e9d727ce5ba2c14653cf8fb0f1367f085271b7/layout/generic/ReflowInput.cpp#2811-2832 https://searchfox.org/mozilla-central/rev/75e9d727ce5ba2c14653cf8fb0f1367f085271b7/layout/generic/ReflowInput.cpp#2861-2868 This fixes a compat issue with the menu alignment in lume.io: webcompat/web-bugs#88484 (comment) It's also simpler. Differential Revision: https://phabricator.services.mozilla.com/D127441
|
Duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1733952 |
…sis rather than just resolving to zero if there's a percentage. This matches other browsers, the spec (https://drafts.csswg.org/css-sizing/#cyclic-percentage-contribution): For the min size properties, as well as for margins and paddings (and gutters), a cyclic percentage is resolved against zero for determining intrinsic size contributions. And also what we do in SizeComputationInput::Compute{Margin,Padding}: https://searchfox.org/mozilla-central/rev/75e9d727ce5ba2c14653cf8fb0f1367f085271b7/layout/generic/ReflowInput.cpp#2811-2832 https://searchfox.org/mozilla-central/rev/75e9d727ce5ba2c14653cf8fb0f1367f085271b7/layout/generic/ReflowInput.cpp#2861-2868 This fixes a compat issue with the menu alignment in lume.io: webcompat/web-bugs#88484 (comment) It's also simpler. Differential Revision: https://phabricator.services.mozilla.com/D127441 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1733952 gecko-commit: 1fd26f24025c3dcb4de967ee8bdc8a0ca9079e78 gecko-reviewers: jfkthame
@James0x57 Thank you for finding that. I would have never guessed it. |
URL: https://lume.io/
Browser / Version: Firefox Mobile 94.0
Operating System: Android 11
Tested Another Browser: Yes Chrome
Problem type: Design is broken
Description: Items not fully visible
Steps to Reproduce:
I only see the background while in Chromium there's a spinning cube and letters.
View the screenshot
Browser Configuration
View console log messages
From webcompat.com with ❤️
The text was updated successfully, but these errors were encountered: