Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

de.m.wikipedia.org - Wrong scrolling behavior when opening sections #25995

Closed
webcompat-bot opened this issue Feb 13, 2019 · 8 comments
Closed
Labels
browser-firefox-mobile priority-critical severity-important A non-core broken piece of functionality, not behaving the way you would expect. type-js Generic JS issues
Milestone

Comments

@webcompat-bot
Copy link

URL: https://de.m.wikipedia.org/wiki/Organische_Halbleiter

Browser / Version: Firefox Mobile 66.0
Operating System: Android 7.0
Tested Another Browser: No

Problem type: Something else
Description: Wrong scrolling behavior when opening sections
Steps to Reproduce:

  • Open mobile Wikipedia page
  • unfold article section
  • browser jumps to bottom for section instead of staying at the top
  • Only occurs once for each article, then works properly even after reload
Browser Configuration
  • mixed active content blocked: false
  • image.mem.shared: true
  • buildID: 20190211185957
  • tracking content blocked: false
  • gfx.webrender.blob-images: true
  • hasTouchScreen: true
  • mixed passive content blocked: false
  • gfx.webrender.enabled: false
  • gfx.webrender.all: false
  • channel: beta

Console Messages:

[u'[console.log(JQMIGRATE: Migrate is installed with logging active, version 3.0.1) https://de.m.wikipedia.org/w/load.php?debug=false&lang=de&modules=ext.centralNotice.choiceData%2Cdisplay%2CgeoIP%2CimpressionDiet%2CkvStore%2CkvStoreMaintenance%2ClegacySupport%2CstartUp%7Cext.centralauth.centralautologin%7Cext.eventLogging%2CnavigationTiming%2CwikimediaEvents%7Cext.eventLogging.subscriber%7Cext.visualEditor.targetLoader%2Ctrack%2Cve%7Cjquery%2Coojs%2Coojs-router%7Cjquery.accessKeyLabel%2Cclient%2Ccookie%2CtextSelection%2Cthrottle-debounce%7Cmediawiki.RegExp%2CString%2CTitle%2CUri%2Capi%2Cbase%2Ccldr%2Cexperiments%2CjqueryMsg%2Clanguage%2Cnotify%2Crouter%2Cstorage%2Ctemplate%2Cuser%2Cutil%2Cviewport%7Cmediawiki.legacy.wikibits%7Cmediawiki.libs.pluralruleparser%7Cmediawiki.page.startup%7Cmediawiki.template.hogan%2Cregexp%7Cmobile.init%2Csite%2Cstartup%7Cmobile.messageBox.styles%7Cmobile.pagelist.styles%7Cmobile.pagesummary.styles%7Cmobile.site.styles%7Cmobile.startup.images%7Cmobile.startup.images.variants%7Cskins.minerva.icons.images.scripts%2Cvariants%7Cskins.minerva.icons.images.scripts.misc%7Cskins.minerva.icons.page.issues.default.color%7Cskins.minerva.icons.page.issues.medium.color%7Cskins.minerva.icons.page.issues.uncolored%7Cskins.minerva.mainMenu%2Coptions%2Cscripts%2Ctoggling%2Cwatchstar%7Cskins.minerva.mainMenu.icons%2Cstyles%7Cskins.minerva.options.share.icon%7Cskins.minerva.scripts.top%7Cuser.defaults&skin=minerva&version=0p0f9jj:212:149]', u'[console.warn(This page is using the deprecated ResourceLoader module "schema.ReadingDepth".\nSee https://phabricator.wikimedia.org/T205744 for migration info.) https://de.m.wikipedia.org/w/load.php?debug=false&lang=de&modules=schema.ReadingDepth&skin=minerva&version=12sbe1a:1:85]', u'[console.warn(Use of "events" is deprecated. Setting `events` on the View is deprecated. Please use options.) https://de.m.wikipedia.org/w/load.php?debug=false&lang=de&modules=startup&only=scripts&skin=minerva&target=mobile:4:642]', u'[console.log(Erfahre mehr darber, wie wir unsere mobile Website erstellen unter https://www.mediawiki.org/wiki/Extension:MobileFrontend) https://de.m.wikipedia.org/w/load.php?debug=false&lang=de&modules=ext.centralNotice.choiceData%2Cdisplay%2CgeoIP%2CimpressionDiet%2CkvStore%2CkvStoreMaintenance%2ClegacySupport%2CstartUp%7Cext.centralauth.centralautologin%7Cext.eventLogging%2CnavigationTiming%2CwikimediaEvents%7Cext.eventLogging.subscriber%7Cext.visualEditor.targetLoader%2Ctrack%2Cve%7Cjquery%2Coojs%2Coojs-router%7Cjquery.accessKeyLabel%2Cclient%2Ccookie%2CtextSelection%2Cthrottle-debounce%7Cmediawiki.RegExp%2CString%2CTitle%2CUri%2Capi%2Cbase%2Ccldr%2Cexperiments%2CjqueryMsg%2Clanguage%2Cnotify%2Crouter%2Cstorage%2Ctemplate%2Cuser%2Cutil%2Cviewport%7Cmediawiki.legacy.wikibits%7Cmediawiki.libs.pluralruleparser%7Cmediawiki.page.startup%7Cmediawiki.template.hogan%2Cregexp%7Cmobile.init%2Csite%2Cstartup%7Cmobile.messageBox.styles%7Cmobile.pagelist.styles%7Cmobile.pagesummary.styles%7Cmobile.site.styles%7Cmobile.startup.images%7Cmobile.startup.images.variants%7Cskins.minerva.icons.images.scripts%2Cvariants%7Cskins.minerva.icons.images.scripts.misc%7Cskins.minerva.icons.page.issues.default.color%7Cskins.minerva.icons.page.issues.medium.color%7Cskins.minerva.icons.page.issues.uncolored%7Cskins.minerva.mainMenu%2Coptions%2Cscripts%2Ctoggling%2Cwatchstar%7Cskins.minerva.mainMenu.icons%2Cstyles%7Cskins.minerva.options.share.icon%7Cskins.minerva.scripts.top%7Cuser.defaults&skin=minerva&version=0p0f9jj:350:594]', u'[console.warn(Use of "events" is deprecated. Setting `events` on the View is deprecated. Please use options.) https://de.m.wikipedia.org/w/load.php?debug=false&lang=de&modules=startup&only=scripts&skin=minerva&target=mobile:4:642]', u'[console.warn(Use of "events" is deprecated. Setting `events` on the View is deprecated. Please use options.) https://de.m.wikipedia.org/w/load.php?debug=false&lang=de&modules=startup&only=scripts&skin=minerva&target=mobile:4:642]']

From webcompat.com with ❤️

@gvanwaelvelde
Copy link

I can't reproduce this on Firefox 67 on Android 8.0.

@Firionus
Copy link

Firionus commented Feb 16, 2019

I made a short video to clarify the behavior of this bug in Firefox 66.0b7:
https://youtu.be/Uk-tCZBgajU

I also could not reproduce this bug in

  • Firefox 67.0a1
  • Firefox 65.0.1
  • Chrome 72.0.3626.105
  • Reference Browser 1.0.1907

on Android 7.0

@softvision-oana-arbuzov softvision-oana-arbuzov changed the title de.m.wikipedia.org - see bug description de.m.wikipedia.org - Wrong scrolling behavior when opening sections Feb 25, 2019
@softvision-oana-arbuzov softvision-oana-arbuzov added the severity-important A non-core broken piece of functionality, not behaving the way you would expect. label Feb 25, 2019
@softvision-oana-arbuzov
Copy link
Member

softvision-oana-arbuzov commented Feb 25, 2019

Thanks for the report @Firionus and for the video, I was able to randomly reproduce it.

Tested with:
Browser / Version: Firefox Nightly 67.0a1 (2019-02-25)
Operating System: LG G5 (Android 7.0) - 1440 x 2560 pixels (~554 ppi pixel density), Samsung Galaxy S7 Edge (Android 8.0.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)

Moving to Needsdiagnosis for further investigation.

@karlcow
Copy link
Member

karlcow commented Feb 27, 2019

On a pixel 2, with Android 9 and Firefox 67 on a fresh profile. I can't reproduce. never. whichever the initial position of the menu.
The sometimes it works makes me think about a timing issue.
We had recently another different issue about these menus. hmm… yes this one #24923 but this is different.

@Firionus says it only happened on 66 and it seems to work on Firefox 67. I would be inclined to close as worksforme given it's working in recent version and will hit soon the beta.

Or if someone is able to run a mozgression, at least we would know why.

@karlcow karlcow closed this as completed Feb 27, 2019
@karlcow karlcow modified the milestones: needsdiagnosis, worksforme Feb 27, 2019
@karlcow karlcow added the type-js Generic JS issues label Feb 27, 2019
@lock
Copy link

lock bot commented Mar 6, 2019

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue at https://webcompat.com/issues/new if you are experiencing a similar problem.

@lock lock bot locked as resolved and limited conversation to collaborators Mar 6, 2019
@karlcow karlcow removed their assignment Mar 11, 2019
@softvision-oana-arbuzov
Copy link
Member

@karlcow , I can still reproduce the issue on a clean profile on 2 different devices.
Note: The section title that will be expanded needs to be on top of the page. Reproducible also for other categories.
image

WrongArticlePositionDisplay

Tested with:
Browser / Version: Firefox Nightly 67.0a1 (2019-03-11)
Operating System: LG G5 (Android 7.0) - 1440 x 2560 pixels (~554 ppi pixel density), Samsung Galaxy S7 Edge (Android 8.0.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)

I'll reopen the issue for further investigation.

@karlcow
Copy link
Member

karlcow commented Mar 13, 2019

On a pixel 2 device the screen is too long to be able to reproduce. because you can't put the menu on top. but even if I open a submenu first to make the page longer, and place the first menu item on top, I can't reproduce. So it's very hard to diagnose without being able to reproduce.

Also if I try on RDM, all the menus are opened by default when simulating the pixel2 (411x731) and all the menus are collapsed when simulating the Galaxy S5 (360x640).

And I can reproduce on RDM using the Galaxy S5 form factor.

ok the way to reproduce on a pixel 2 is by putting the screen into landscape mode. So this is happening only if the menus are all collapsed at the start (small screen height) AND you can put the first menu at the top of the viewport. If the viewport is higher so the page bottom is visible without having the menu at the top, this is not working.

Maybe that can give us a clue. The sections which are open have open-block class value. There is a function to open blocks.

                function mfTempOpenSection(id) {
                  var block = document.getElementById("mf-section-" + id);
                  block.className += " open-block";
                  block.previousSibling.className += " open-block";
                }

on

                <h2
                  class="in-block section-heading"
                  onclick="javascript:mfTempOpenSection(1)"
                >

but this is not activated when we click on the header: document.getElementById("mf-section-" + id); returns nothing. text blocks have id like content-collapsible-block-1 and class like mf-section-2, I wonder if they got it wrong in coding. Anyway. This is supposed to flip the open-block which is, in fact, handled by…

https://de.m.wikipedia.org/w/load.php?debug=false&lang=de&modules=ext.centralNotice.bannerHistoryLogger%2CchoiceData%2Cdisplay%2CgeoIP%2CimpressionDiet%2CkvStore%2CkvStoreMaintenance%2ClargeBannerLimit%2ClegacySupport%2CstartUp%7Cext.centralauth.centralautologin%7Cext.eventLogging%2CnavigationTiming%2CwikimediaEvents%7Cext.eventLogging.subscriber%7Cext.visualEditor.targetLoader%2Ctrack%2Cve%7Cjquery%2Coojs%2Coojs-router%7Cjquery.accessKeyLabel%2Cclient%2Ccookie%2CtextSelection%2Cthrottle-debounce%7Cmediawiki.RegExp%2CString%2CTitle%2CUri%2Capi%2Cbase%2Ccldr%2Ccookie%2Cexperiments%2CjqueryMsg%2Clanguage%2Cnotify%2Crouter%2Cstorage%2Ctemplate%2Cuser%2Cutil%2Cviewport%7Cmediawiki.legacy.wikibits%7Cmediawiki.libs.pluralruleparser%7Cmediawiki.page.startup%7Cmediawiki.template.hogan%2Cregexp%7Cmobile.init%2Csite%2Cstartup%7Cmobile.messageBox.styles%7Cmobile.pagelist.styles%7Cmobile.pagesummary.styles%7Cmobile.site.styles%7Cmobile.startup.images%7Cmobile.startup.images.variants%7Cskins.minerva.icons.images.scripts%2Cvariants%7Cskins.minerva.icons.images.scripts.misc%7Cskins.minerva.icons.page.issues.default.color%7Cskins.minerva.icons.page.issues.medium.color%7Cskins.minerva.icons.page.issues.uncolored%7Cskins.minerva.mainMenu.icons%2Cstyles%7Cskins.minerva.options%2Cscripts%2Ctoggling%2Cwatchstar%7Cskins.minerva.options.share.icon%7Cuser.defaults&skin=minerva&version=1htp505

function u(e, t, s) {
  var r,
  n,
  a = l(s);
  t.find('.section-heading span').each(function () {
    n = t.find(this),
    r = n.parents('.section-heading'),
    a[s.title][n.attr('id')] && !r.hasClass('open-block') && e.toggle(r, s)
  })
}
function p(e) {
  var t = (new Date).getTime(),
  s = l(e);
  Object.keys(s).forEach(function (e) {
    var r = s[e];
    Object.keys(r).forEach(function (n) {
      var a = r[n];
      Math.floor((t - a) / 1000 / 60 / 60 / 24) >= 1 && delete s[e][n]
    })
  }),
  h(s)
}
c.prototype.toggle = function (e) {
  var t,
  s = e.is('.open-block'),
  n = e.data('page'),
  a = e.next();
  e.toggleClass('open-block'),
  e.data('indicator').remove(),
  i.rotation = s ? 0 : 180,
  t = new o(i).prependTo(e),
  e.data('indicator', t),
  a.toggleClass('open-block').attr({
    'aria-pressed': !s,
    'aria-expanded': !s
  }),
  this.eventBus.emit('section-toggled', {
    expanded: s,
    page: n,
    isReferenceSection: Boolean(a.attr('data-is-reference-section')),
    $heading: e
  }),
  r.isWideScreen() || function (e, t) {
    var s = e.find('span').attr('id'),
    r = e.hasClass('open-block'),
    n = l(t);
    s && (r ? n[t.title][s] = (new Date).getTime()  : delete n[t.title][s], h(n))
  }(e, n)
},
c.prototype.reveal = function (e, t) {
  var s,
  r;
  try {
    (r = (s = t.find(a(e))).parents('.collapsible-heading')).length || (r = s.parents('.collapsible-block').prev('.collapsible-heading')),
    r.length && !r.hasClass('open-block') && this.toggle(r),
    r.length && window.scrollTo(0, s.offset().top)
  } catch (e) {
  }
},

When we click on the heading, this function is triggered.

c.prototype.toggle = function (e) {
  var t,
  s = e.is('.open-block'),
  n = e.data('page'),
  a = e.next();
  e.toggleClass('open-block'),
  e.data('indicator').remove(),
  i.rotation = s ? 0 : 180,
  t = new o(i).prependTo(e),
  e.data('indicator', t),
  a.toggleClass('open-block').attr({
    'aria-pressed': !s,
    'aria-expanded': !s
  }),
  this.eventBus.emit('section-toggled', {
    expanded: s,
    page: n,
    isReferenceSection: Boolean(a.attr('data-is-reference-section')),
    $heading: e
  }),
  r.isWideScreen() || function (e, t) {
    var s = e.find('span').attr('id'),
    r = e.hasClass('open-block'),
    n = l(t);
    s && (r ? n[t.title][s] = (new Date).getTime()  : delete n[t.title][s], h(n))
  }(e, n)
},

and the repositioning happen when we hit the line.

e.toggleClass('open-block'),

toogleClass is just

    jQuery.fn.toggleClass = function (state) {
      if (state !== undefined && typeof state !== 'boolean') {
        return oldToggleClass.apply(this, arguments);
      }
      migrateWarn('jQuery.fn.toggleClass( boolean ) is deprecated');
      return this.each(function () {
        var className = this.getAttribute && this.getAttribute('class') || '';
        if (className) {
          jQuery.data(this, '__className__', className);
        }
        if (this.setAttribute) {
          this.setAttribute('class', className || state === false ? '' : jQuery.data(this, '__className__') || '');
        }
      });
    };

which does nothing much but changing the class.

when open-block is added it triggers from the CSS.

.client-js .collapsible-block.open-block {
	display: block;
}

I tried to make a reduced test case, but I can't reproduce the behavior.
https://codepen.io/webcompat/pen/VRrdWY
So I wonder if there is something else going on too.

I don't think this is related to the website code. And it's probably a bizarre behavior of Firefox. I will open a new bug on bugzilla.

@karlcow karlcow self-assigned this Mar 13, 2019
@karlcow
Copy link
Member

karlcow commented Mar 13, 2019

Close as duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1534863

@webcompat-bot webcompat-bot removed this from the needsdiagnosis milestone Mar 13, 2019
@webcompat-bot webcompat-bot added this to the duplicate milestone Mar 13, 2019
@karlcow karlcow removed their assignment Apr 30, 2019
@karlcow karlcow removed the status-needsinfo-karlcow ping @karlcow label Mar 10, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
browser-firefox-mobile priority-critical severity-important A non-core broken piece of functionality, not behaving the way you would expect. type-js Generic JS issues
Projects
None yet
Development

No branches or pull requests

6 participants