Closed Bug 1514779 Opened 6 years ago Closed 6 years ago

Responsive view not working properly since last update

Categories

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

Product:
DevTools
Component:
Responsive Design Mode
Version:
64 Branch
Type:
defect

Tracking

(firefox64 wontfix, firefox65 wontfix, firefox66 wontfix, firefox67 fix-optional, firefox68 fixed)

Status:
RESOLVED DUPLICATE of bug 1501665
Tracking Flags:
Tracking Status
firefox64 --- wontfix
firefox65 --- wontfix
firefox66 --- wontfix
firefox67 --- fix-optional
firefox68 --- fixed

People

(Reporter: mlh, Unassigned)

References

(Blocks 1 open bug)

Details

(Keywords: regression)

Attachments

(1 file)

Screenshot_2018-12-19 10.32.06_R9g2XO.png
(deleted), image/png
Details
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.
Component: Untriaged → Responsive Design Mode
Flags: needinfo?(pbrosset)
Product: Firefox → DevTools
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?
Flags: needinfo?(mlh)
See Also: → https://bugzilla.mozilla.org/show_bug.cgi?id=1501665
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.
Flags: needinfo?(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.
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?
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.
Flags: needinfo?(pbrosset)
Status: UNCONFIRMED → NEW
Ever confirmed: true
Priority: -- → P2
(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.
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.
(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).
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.
Flags: needinfo?(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.
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.
Flags: needinfo?(botond)

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.

Depends on: 1504659

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

status-firefox65: affected → fix-optional
Blocks: rdm-ux

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

(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.

No longer blocks: rdm-ux
Keywords: qawanted

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

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.

Keywords: regressionwindow-wanted
Assignee: nobody → bwerth
Depends on: 1501665

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

Flags: needinfo?(bwerth)

(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.

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.

Flags: needinfo?(bwerth) → needinfo?(mlh)
Assignee: bwerth → nobody
Whiteboard: [rdm-mvp]
Status: NEW → RESOLVED
Closed: 6 years ago
Resolution: --- → DUPLICATE
Whiteboard: [rdm-mvp]
Flags: needinfo?(mlh)
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: