1663190 - responsive issue with resizing window in in firefox developer

Status: RESOLVED INCOMPLETE

(Core :: Layout, defect)

Description

[Nathalia Morgana]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:81.0) Gecko/20100101 Firefox/81.0

Steps to reproduce:

Resizing window by either using the resize tool or simply the window itself

Actual results:

Certain websites break down and remain in their smallest breakpoint (mobile version), even if the window is being resized to its maximum.

Expected results:

Fluid resizing, without websites being stuck in their smallest size.

Comment 1

[Alice0775 White]

sorry, wrong component

Comment 2

[Clara Guerrero ( Need Info Brindusa Tot Please)]

Hi Nathalia,

Can you please give an example of which websites you can reproduce this issue?

Please test if the issue occurs to you in safe mode (add-ons disabled). Here is a link that can help you do that:
https://support.mozilla.org/en-US/kb/troubleshoot-firefox-issues-using-safe-mode

Thanks for the report.

Clara

Comment 3

[Nathalia Morgana]

Hi Clara,

Thank you for your response! The websites I've developed are currently facing this issue with the resize tool: mandalaviajes.cl and zenit.travel
I've disabeld the add-ons and restart the browser on safe-mode before confirming this.

Thank you for your time and support!

Greetings, Nathalia

Comment 4

[Clara Guerrero ( Need Info Brindusa Tot Please)]

And this is without Responsive Design Mode enabled right?

Can you please submit a screen capture demonstrating the issue? Does it happen in other browsers? I can resize without issues both chrome and firefox versions. I'm using windows 10 pro,
Firefox nightly 82.0a1 (2020-09-08) (64-bit)
Beta 81.0b7 (64-bit)
Release 80.0

Best,
Clara

Comment 5

[Nathalia Morgana]

Hi Clara,

Thank you for your help! I'm currently using Firefox developer 81.0b7 (64-bit), running this browser on Windows 10 Pro.
I didn't face this problem before after the (beta) update. My guessing is possibly css flexbox?

This happens after resizing the website with the resize tool:
https://ibb.co/mJfZ2fc

This happens after I use the screenshot tool or after I reload the website, the website returns responsive:
screenshot tool:
https://ibb.co/HdFSgJ5

after reload:
https://ibb.co/M2tn7K6

Greetings, Nathalia

Comment 6

[Nathalia Morgana]

I don't face this issue with other browsers, except for Firefox developer (even in edge the website seems to be functioning..)

Comment 7

[Clara Guerrero ( Need Info Brindusa Tot Please)]

Attachment: resize.webm

Hi Nathalia,

I think the links have expired so unfortunately I'm not able to view the screenshots. I've just tried firefox developer Firefox Setup 81.0b9 https://download.mozilla.org/?product=firefox-devedition-latest-ssl&os=win64&lang=en-US but I don't encounter the issue you mention.

Please let me know if I'm missing anything from my video. I just noticed that when making size smalled, the header is cut, but it also happens in chrome so it's not a ff problem.
Any additional information that can help me reproduce will be appreciated.

Best regards,
Clara

Comment 8

[Nathalia Morgana]

Hi Clara,

Thank you for your response. I'm sending you a video of the issue I'm currently facing, I believe the video explains it better than my words. Firefox Developer only displays the correct layout when I reload the window, but on resizing (with or without the resize tool), it tends to break the design of the website.. I haven't faced this kind of issue before with the previous version of Firefox Developer.

https://streamable.com/dmkbqm

Greetings, Nathalia

Comment 9

[Clara Guerrero ( Need Info Brindusa Tot Please)]

Thanks for the video Nathalia ,I'm still not able to reproduce using firefox dev edition 82.0b2 (64-bit) , it behaves same as chrome Version 85.0.4183.102 (Official Build) (64-bit)
I'm setting a component for this in order to get the dev team involved.
If you feel it's an incorrect one please feel free to change it to a more appropriate one.
Best,
Clara

Comment 10

[Nathalia Morgana]

Thanks Clara, this issue seems to be only occurring in firefox developer. I also recently updated the browser to 82.0b2 (64-bit), and unfortunately no change.. I have tried to reproduce the bug in the normal firefox browser, but it seems to be working fine there, same for chrome and even in edge.

I truly hope the dev team can solve this, thanks for the effort.

Comment 11

[Julian Descottes [:jdescottes]]

As mentioned in comment 8, this issue is not only triggered by responsive mode:

on resizing (with or without the resize tool), it tends to break the design of the website...

Moving back to Core.

Comment 12

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:boris, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 13

[Boris Chiou [:boris]]

Thank you for your help! I'm currently using Firefox developer 81.0b7 (64-bit), running this browser on Windows 10 Pro.
I didn't face this problem before after the (beta) update. My guessing is possibly css flexbox?

TYLin, dholbert, would you please check is this a CSS flexbox issue?

Comment 14

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

The two websites in comment 3 (https://zenit.travel/ and https://mandalaviajes.cl/) doesn't look like the video shown in comment 8, nor did I see any issue for the two sites in responsive design mode. (Tested on Firefox Nightly 2021-01-14.)

Hi Nathalia, if you still see this bug in latest Firefox dev edition, could you post the URL to the site?

Comment 15

[Daniel Holbert [:dholbert]]

(In reply to Boris Chiou [:boris] from comment #13)

TYLin, dholbert, would you please check is this a CSS flexbox issue?

(Looking at the videos, I would guess that this is either a Media Queries bug, or an issue with some media-query-related JS API that the site uses to make itself responsive. Or e.g. it could be that a JS error is thrown in some circumstances which prevents the site from running JS to adapt to viewport changes, if it's expecting to do that. Hard to know without a live example to poke at; looking forward to hearing back from the reporter on comment 14.)

Comment 16

[BugBot [:suhaib / :marco/ :calixte]]

A needinfo is requested from the reporter, however, the reporter is inactive on Bugzilla. Given that the bug is still UNCONFIRMED, closing the bug as incomplete.

For more information, please visit BugBot documentation.