Responsive layout problem
Categories
(Core :: Layout, defect)
Tracking
()
People
(Reporter: k.alam13548, Unassigned)
Details
Attachments
(2 files)
firefox.png
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:97.0) Gecko/20100101 Firefox/97.0
Steps to reproduce:
I am a Web Developer. Recently while working with my portfolio I a have encountered a bug in Firefox then I also checked with other devices in Firefox Browser with different websites but the problem remains the same then I thought this a bug in Firefox.
Actual results:
As you can see, in the developer tool the navbar is a little bit right but actually, that is not happening and it is working fully responsively working on the mobile devices and another browser is showing it correctly. I Hope, the Mozilla developer team will take it seriously and the bug will be fixed soon!
Thanks,
Kawsar Alam.
Expected results:
The layout mode needs to be fixed and responsive for mobile devices.
|
||
Comment 1•4 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.
|
||
Comment 2•4 years ago
|
||
Kawsar, thanks for reporting this bug. I suppose the navibar you meant is "Services Technologies About" in the screenshot, right? Can you please post the HTML in question? A simplified test case would be nice. Thanks!
|
Reporter | |
Comment 3•4 years ago
|
||
(In reply to Hiroyuki Ikezoe (:hiro) from comment #2)
Kawsar, thanks for reporting this bug. I suppose the navibar you meant is "Services Technologies About" in the screenshot, right? Can you please post the HTML in question? A simplified test case would be nice. Thanks!
import Link from 'next/link';
import Head from 'next/head';
import React from 'react';
import { AiFillGithub, AiFillFacebook, AiFillLinkedin } from 'react-icons/ai';
import {
Container,
Div1,
Div2,
Div3,
NavLink,
SocialIcons,
Span,
} from './HeaderStyles';
const Header = () => (
<>
<Head>
<meta charset='UTF-8'></meta>
<meta
name='description'
content='Kawsar Alam is a MERN Stack Developer in Bangladesh with experience of creating amazing webapps.'
/>
<meta
name='viewport'
content='width=device-width, initial-scale=1'
></meta>
<meta
name='keyword'
content='full-stack web developer in bangladesh, mern stack web developer in bangladesh, reactjs developer in bangladesh, nodejs developer in bangladesh, nextjs developer in bangladesh, mern developer in bangladesh, e-commerce engineer in bangladesh, web developer in bangladesh, web designer in bangladesh, bootstrap developer in bangladesh, material ui designer, tailwind css designer in bangladesh, seo optimization, frontend developer in bangladesh, backend developer in bangladesh, mongodb expert in bangladesh, mern expert in bangladesh, best web developer in bangladesh, top web developer in bangladesh, experienced web developer in bangladesh, web developer, mern stack developer, full-stack web developer, front-end developer, nodejs developer, back-end developer, react developer, express developer, programmer'
/>
<title>Kawsar Alam - MERN Stack Developer</title>
<link rel='icon' href='/favicon.ico' />
</Head>
<Container>
<Div1>
<Link href='/'>
<a>
<img src='/logoWhite.png' width={80} height={60} alt='logo' />
</a>
</Link>
</Div1>
<Div2>
<li>
<Link href='#projects'>
<NavLink>Services</NavLink>
</Link>
</li>
<li>
<Link href='#tech'>
<NavLink>Technologies</NavLink>
</Link>
</li>
<li>
<Link href='#about'>
<NavLink>About</NavLink>
</Link>
</li>
</Div2>
<Div3>
<SocialIcons href='https://github.com/kawsar441'>
<AiFillGithub size='3rem' />
</SocialIcons>
<SocialIcons href='https://facebook.com/kawsar210'>
<AiFillFacebook size='3rem' />
</SocialIcons>
<SocialIcons href='https://linkedin.com/in/kawsar0210'>
<AiFillLinkedin size='3rem' />
</SocialIcons>
</Div3>
</Container>
</>
);
export default Header;(In reply to Hiroyuki Ikezoe (:hiro) from comment #2)
Kawsar, thanks for reporting this bug. I suppose the navibar you meant is "Services Technologies About" in the screenshot, right? Can you please post the HTML in question? A simplified test case would be nice. Thanks!
|
|
||
Comment 4•4 years ago
|
||
The severity field is not set for this bug.
:hiro, could you have a look please?
For more information, please visit auto_nag documentation.
|
||
Comment 5•4 years ago
|
||
This appears to be about the behavior of justify-content: space-around; in flexbox when the content overflows the available width, and the flexbox layout is wrapped in a grid item that spans more than a single grid column.
Example (c) in this testcase is a reduced version of what's happening in the reporter's page. In Chrome and Safari, the content (which overflows the available width of the grid item) is centered, so that it projects equally on both sides, whereas in Firefox it is left-aligned.
Curiously, as example (b) shows, this doesn't happen if the wrapper was a single grid column; in this case all the browsers left-align the overflowing flexbox content.
And if the wrapper is not a grid item at all but just a block, as in example (d), then all the browsers center the overflowing content.
@dholbert, perhaps you know why these differences in behavior arise, and what the spec actually expects here.
|
|
||
Comment 6•4 years ago
|
||
I haven't investigated the spec details here but intuitively it seems odd to me that (b) and (c) should differ, which implies that Firefox has the more logical behavior. Maybe the other browsers are in error?
|
||
Comment 7•4 years ago
|
||
(In reply to Jonathan Kew (:jfkthame) from comment #5)
This appears to be about the behavior of
justify-content: space-around;in flexbox when the content overflows the available width, and the flexbox layout is wrapped in a grid item that spans more than a single grid column.
Thanks -- this^ gets to the crux of the issue. This is an instance of bug 1530097 (and in particular bug 1708884 which is part of it and has a more-specific title: per a spec change, "grid items should resolve their content-based minimum size to 0, if they span a flexible track".)
If you add min-width:0 to the grid item (which is the flex container), then Firefox changes its rendering to match Chrome and to overflow equally on both sides.
Kawsar: thank you for the bug report -- if you'd like, you can work around this on your site by adding min-width:0 to this CSS rule (line 201 of the HTML source at https://kawsaralam.netlify.app/ ):
@media screen and (max-width:640px){.jWpgjG{grid-area:2 / 2 / 3 / 5;font-size:2.5rem;margin-top:-1.5rem;}}/*!sc*/
This won't change behavior in Chrome, because Chrome already resolves the min-width to 0 for elements with this particular CSS class (since on your site, these elements span flexible tracks). It will change the behavior in Firefox to match the behavior you see in Chrome.
|
|
||
Comment 8•4 years ago
•
|
||
Briefly, the issue here is that Firefox is interpreting the default min-width:auto as forcing the grid item, i.e. the flex container, to be as wide as its content. So justify-content doesn't have any work to do inside of that flex container, because the flex container is exactly the right size -- there isn't any positive or negative space to distribute. It just positions its content at its own 0,0 position.
This is generally the correct thing to do for grid items with min-width:auto (forcing them to be as wide as their content), except for this particular special case where the item spans a flexible track, which is what bug 1530097 is about.
If you explicitly set min-width:0 on the grid item (the flex container), then that lets it shrink to be smaller than its contents, to fit its (smaller) grid area. And then the flex container does end up having some negative space to distribute when it lays out its children, which it applies using justify-content:space-around by displacing its children off to the left a bit.
|
|
||
Comment 9•3 years ago
|
||
This is now fixed in Nightly, almost certainly via bug 1799111, so let's dupe this over there instead.
(Specifically: in case "c" in attachment 9264262 [details], we now overflow the content equally off the start and end side of the box, the same as other browsers do.)
Description
•