1514779 - Responsive view not working properly since last update

Status: RESOLVED DUPLICATE of bug 1501665

(DevTools :: Responsive Design Mode, defect, P2)

Description

[mlh]

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

Steps to reproduce:

Simply go to responsive view.  


Actual results:

previously in the responsive view the website works.  ie, menu items, sizing of the view, etc.  

After the most recent update the responsive view seems to be static in the selected size.  ie: choosing ipad you end up on ipad size but if you try to shrink it using the sizing on the screen the actual view doesn't change to reflect changes in the CSS for the new width of the screen.  Also menu items on the ipad view don't work where on an actual ipad online they do.


Expected results:

I expect the responsive view to be dynamic.  When I shrink the size of the view screen I expect the display to update to the CSS for the new width.  I expect menu items to work.  I expect scroll bars to work.  This makes the development of responsive websites more difficult.

Comment 1

[Martin Balfanz [:mbalfanz]]

I assume this is related to bug 1501665.

mlh: Can you confirm that this behavior appears when touch simulation is enabled, and everything works as expected when touch simulation is deactivated?

Comment 2

[mlh]

Do not know about touch simulation.  I'm using this on a laptop not enabling any touch simulation to my knowledge.  Not seeing any options for touch simulation nor do I know what you are talking about.  This is happening with just the default configuration of firefox and doing the ctrl+shift+m to get to the responsive view.  It mostly doesn't work in the responsive view.  Sometimes it doesn't even size properly and the buttons on the form do not work.  Have to reload to get it to show the view for the new size based on the css.  lots of re-loading, turning responsive view off and on to see the results of any changes.

Comment 3

[mlh]

Also I was looking at the bug you mentioned and noticed that it says 2 months ago.  I didn't have this issue 2 months ago.  Not until the most recent update like a week or less ago. ie:not before December 10th 2018 or there abouts.

Comment 4

[Martin Balfanz [:mbalfanz]]

Attachment: Screenshot_2018-12-19 10.32.06_R9g2XO.png

The bug I filed was against a pre-release version of Firefox, while you are reporting the issue on the recent stable. So the 2 months difference might make sense if the bug was carried along.

Touch simulation can be toggled in the top menu bar in RDM (hand icon, see screenshot).  When you choose any of the predefined devices that has touch capabilities, we will enable this automatically.

In your original report you gave the iPad preset as an example. This would toggle this setting on. I'm wondering now if the issue still exists for you if you go to some custom size and toggle the hand icon off?

Comment 5

[Patrick Brosset <:pbro>]

Nothing to add much on top of what Martin already said. I agree with him that this might be related to bug 1501665. Unfortunately, this seems to be a regression introduced in 64 which we didn't find and investigate early enough.
We're close to having a fix (yet in another bug 1504659, once this is fixed and if we confirm they are duplicate, we'll have to close this one and bug 1501665 as duplicates).
So we'll just continue working on readying the fix for this and then we'll see if we can uplift it.

Comment 6

[Botond Ballo [:botond]]

(In reply to mlh from comment #0)
> After the most recent update the responsive view seems to be static in the
> selected size.  ie: choosing ipad you end up on ipad size but if you try to
> shrink it using the sizing on the screen the actual view doesn't change to
> reflect changes in the CSS for the new width of the screen.

This sounds like it might be an expected consequence of bug 1290420. In that bug, RDM was changed to respect <meta name="viewport"> tags, which means the browser will look at such tags and use them to determine the size of the page for layout purposes.

Based on this description, it sounds like you might be testing a page which was a <meta name="viewport"> tag with a fixed width, such as :

  <meta name="viewport" content="width=600px">

If you'd like the page to always be laid out based on the device size, you can do that by changing the tag to something like this:

  <meta name="viewport" content="width=device-width">

Note that this reflects the behaviour of the page on the actual devices. That was the purpose of the change in bug 1290420: to make RDM behave more like the actual device.

Comment 7

[mlh]

The viewport setting is as follows.  <meta name="viewport" content="width=device-width, initial-scale=1">

So no I'm not testing on a page that had a viewport set with a fixed width.

Comment 8

[Botond Ballo [:botond]]

(In reply to mlh from comment #7)
> The viewport setting is as follows.  <meta name="viewport"
> content="width=device-width, initial-scale=1">
> 
> So no I'm not testing on a page that had a viewport set with a fixed width.

Ok, thanks. It would be helpful to have an example HTML page that triggers the problem for you (feel free to either attach it or link to it).

Comment 9

[mlh]

Giving you a URL doesn't work.  The problem is in developing responsive views (on my local machine.  I'm using bitami is that helps).  I change something in the layout and reload.  It doesn't reflect the changes in the responsive views.  (it used to but doesn't now, at least not always)  If I exit the responsive view and reload then re-enter it it will usually update.  Also changing the size by using the side bar to re-size the screen doesn't always reflect the changes at various sizes in the responsive view.  The ipad reference was to the menu items not being functional.  They are on an actual ipad but not in the responsive view set to ipad.

I have never used that hand thing for the touch simulation.  I have a touch screen on my laptop as is.

Comment 10

[Botond Ballo [:botond]]

(In reply to mlh from comment #9)
> Giving you a URL doesn't work.

You could attach an HTML file, possibly obtained via File -> Save Page As while loading a problematic page.

Comment 11

[Botond Ballo [:botond]]

In the absence of an example page that demonstrates the problem, my best suggestion is to wait for the changes planned in bug 1501665 to land, and see if it improves the situation.

Comment 12

[Patrick Brosset <:pbro>]

Marking this as depending on bug 1504659 which is where BradWerth is doing the work that should also fix this.
Once this lands, we'll need to test this scenario again and see if the fix was, indeed, the right one, and will then close this as a duplicate.

Comment 13

[Panos Astithas (he/him) [:past] (please ni?)]

Marking as fix-optional for 65 since both bug 1504659 and bug 1501665 are marked as such.

Comment 14

[Andrew Overholt [:overholt]]

Copying comment 13 for 64.

Comment 15

[Brad Werth [:bradwerth]]

Once Bug 1521814 lands, this issue will need the pref dom.meta-viewport.enabled set to true in order to properly test it.

Comment 16

[Brad Werth [:bradwerth]]

(In reply to Brad Werth [:bradwerth] from comment #15)

Once Bug 1521814 lands, this issue will need the pref dom.meta-viewport.enabled set to true in order to properly test it.

Update: the relevant pref is devtools.responsive.metaViewport.enabled.

Comment 18

[Gabriel Luong [:gl] (ΦωΦ)]

Clearing qawanted because of Bug 1523358 which will disable this keyword which is no longer used by qa.

Comment 19

[Cristian Fogel [:cfogel]]

After a regression check, Bug 1290420 seems to be the cause of this issue.
As per comment 9, I've checked using a locally saved test file with the viewport set as per comment 6.

Comment 20

[Neha Kochar [:neha]]

Brad, is this being worked on for an uplift to 67 beta?

Comment 21

[Brad Werth [:bradwerth]]

(In reply to Neha Kochar [:neha] from comment #20)

Brad, is this being worked on for an uplift to 67 beta?

No, it seems too risky. Bug 1501665 required a big patch, and it's already created some cleanup bugs like Bug 1536755. We'll need a full cycle to sort it out.

Comment 22

[Brad Werth [:bradwerth]]

I believe this may be fixed now with the landing of Bug 1501665. Would you please re-test in Nightly? You will need to set the pref devtools.responsive.metaViewport.enabled to true to add meta viewport support to Responsive Design Mode.