1650286 - Vuepress layout can‘t adjust for mobile view in Fenix

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect, P3)

Description

[bugzilla]

Attachment: Actual results in Fenix

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

Steps to reproduce:

Visit a VuePress website like https://vuepress.vuejs.org/guide/. In legacy Firefox for Android (org.mozilla.firefox) can't reproduce it. It only can be reproduced in Fenix both of Firefox Beta (org.mozilla.firefox_beta) and Firefox Nightly (org.mozilla.fenix).

I find it also can be reproduced in Firefox Desktop in Responsive Design Mode. It only occurs in specific status:

In Firefox Desktop(Responsive Design Mode) it has some difference. Change the window size by directly drag the frame, it will normally adjust for mobile view. But if change the window size by change device model, problem will occurs again.

Actual results:

Layout can‘t adjust for mobile view and keep desktop view in Fenix. I'm sure "Request Desktop Site" is disabled and never switched on.

Expected results:

VuePress layout auto adjust for mobile view. Not to keep desktop view. In Chrome for Android and legacy Firefox for Android (org.mozilla.firefox) everything work properly.

Comment 1

[bugzilla]

Attachment: Reproduce in Firefox Desktop in Responsive Design Mode

Comment 2

[Kevin Brosnan [Ex-Mozilla]]

Webcompat folks are the best to look into these sorts of things. They should be able to let us know if this is a Gecko or VueJS bug.

Comment 3

[Mike Taylor [:miketaylr]]

Karl, can you take a look?

Comment 4

[Kevin Brosnan [Ex-Mozilla]]

I did a quick look at this and as the reporter mentions this is reproducible in devtools RDM with any user agent. Disabling tracking protection does not affect the behavior in desktop.

Comment 5

[Karl Dubost💡 :karlcow]

This is a duplicate of https://github.com/webcompat/web-bugs/issues/52296
which is a bug in Chromium https://bugs.chromium.org/p/chromium/issues/detail?id=986674
which is kind of blocked by WPT capabilities https://github.com/web-platform-tests/wpt/issues/11717
which itself is tied to platform testing capabilities https://github.com/web-platform-tests/wpt/issues/19711

The site should be contacted.

At the same time given that it is happening in multiple VuePress websites, it would be interesting to find what is the source inside VuePress which creates the issue.

I wonder if Ksenia had explored this during the first diagnosis.

Comment 6

[Ksenia Berezina [:ksenia]]

This is happening because some meta tags are being removed from the header, including viewport tag in: https://github.com/vuejs/vuepress/blob/master/packages/@vuepress/core/lib/client/root-mixins/updateMeta.js#L66

function updateMetaTags (newMetaTags, currentMetaTags) {
  if (currentMetaTags) {
    [...currentMetaTags]
          .filter(c => c.parentNode === document.head)
          .forEach(c => document.head.removeChild(c))
  }
 ...

There is an issue in vuepress repo related to this and a corresponding PR https://github.com/vuejs/vuepress/pull/2333, however the PR wasn't merged yet. I'm not sure what the status of the PR is, so I pinged the author.

Note that the problem with https://docs.rsshub.app/ in wpt-52296 is no longer reproducible since they applied their own workaround in https://github.com/DIYgod/RSSHub/issues/4633.

Comment 7

[Oana Arbuzov [:oanaarbuzov]]

The issue seems to be fixed, I get the mobile layout now.
https://prnt.sc/-fDleGN_JcGj
Tested with:
Browser / Version: Firefox Nightly 100.0a1 (🦎 100.0a1-20220321065848)
Operating System: Google Pixel 5 (Android 12) - 1080 x 2340 pixels, 19.5:9 ratio (~432 ppi density), Samsung Galaxy S8 (Android 9) - 1440 x 2960 pixels, 18.5:9 ratio (~570 ppi density)

myuki can you still reproduce it?