Web-bugs: www.computerbase.de - Firefox does not display the content from the top of the prompt

[webcompat-bot]

URL: https://www.computerbase.de/

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

Problem type: Site is not usable
Description: Missing items
Steps to Reproduce:

View the screenshot

Browser Configuration

• gfx.webrender.all: false
• gfx.webrender.blob-images: true
• gfx.webrender.enabled: false
• image.mem.shared: true
• buildID: 20201001094020
• channel: nightly
• hasTouchScreen: true
• mixed active content blocked: false
• mixed passive content blocked: false
• tracking content blocked: false

View console log messages

_From webcompat.com with ❤️_

[cipriansv]

Thanks for the report.

I was indeed able to reproduce the issue. Firefox does not display the content from the top of the prompt, making it impossible to accept the cookies and move on.

Tested with:
Browser / Version: Firefox Nightly 201006(🦎 82.0a1-20201001094020), Chrome Mobile [phone]
Operating System: OnePlus6 (Android 10) - 1080 x 2280 pixels (~402 ppi pixel density)

This is the web page displayed in Firefox Nightly:

And this is the web page displayed in Chrome:

Moving the issue to needsdiagnosis.

[ksy36]

I can't reproduce on the actual device, but it's reproducible on RDM. I think this perhaps depends on the device screen size. Did mozregression and it seems the behaviour is caused by enabling dialog in Nightly https://bugzilla.mozilla.org/show_bug.cgi?id=1645046

[karlcow]

so on RDM I had the two behaviors

Working

<dialog class="consent js-consent" style="transform: translate(0px);" open="">
  <div class="consent__wrapper">
…
  </div>
</dialog>

Not Working

<dialog class="consent js-consent" open="">
  <div class="consent__wrapper">
…
  </div>
</dialog>

The difference is transform: translate(0px).

ooooh…
https://www.computerbase.de/js/main.0d832868.js

  function s() {
    function t(t) {
      return 27 !== t.which
    }
    /Firefox\/83/.test(navigator.userAgent) && j.css('transform', 'translate(0, 0)'),
    j[0].showModal(),
    T.addClass('consent-dialog-open'),
    r(window).on('unload', d),
    r(document).on('keydown', t),
    j.on('close', function () {
      j.remove(),
      T.removeClass('consent-dialog-open'),
      r(document).off('keydown', t),
      u('accept'),
      r(window).off('unload', d),
      k(m, 1),
      e(function () {
        Optanon.AllowAll(),
        n(),
        document.activeElement && document.activeElement.blur()
      })
    }, !1),
    r('.js-consent-info-button').on('click', function () {
      return e(function () {
        T.addClass('unhide-optanon'),
        r('#onetrust-consent-sdk').appendTo(j),
        Optanon.ToggleInfoDisplay(),
        u('info'),
        c(function () {
          T.removeClass('unhide-optanon'),
          r('#onetrust-consent-sdk').appendTo(T)
        })
      }),
      !1
    }).on('contextmenu', function () {
      return !1
    }),
    r('.js-consent-vendors-button').on('click', function (t) {
      e(function () {
        T.addClass('unhide-optanon'),
        r('#onetrust-consent-sdk').appendTo(j),
        u('vendors'),
        c(function () {
          T.removeClass('unhide-optanon'),
          r('#onetrust-consent-sdk').appendTo(T)
        })
      }),
      t.preventDefault()
    }).on('contextmenu', function () {
      return !1
    }).addClass('onetrust-vendors-list-handler'),
    j.on('click', function (t) {
      var e = t.target;
      'A' === e.tagName && /^\//.test(e.getAttribute('href')) && (f = e)
    })
  }

See this /Firefox\/83/.test(navigator.userAgent) && j.css('transform', 'translate(0, 0)'),

They tried to fix it, but it seems there is a kind of race issues sometimes and the translate is not applied. This is an interesting side effect.

[karlcow]

I added a comment on https://bugzilla.mozilla.org/show_bug.cgi?id=1645046#c18

[ksy36]

ah nice catch @karlcow. If Firefox version is other than 83, it doesn't apply the transform..
That explains why it works on my phone and not RDM, I had a way older version on RDM

[steffenweber]

Developer of ComputerBase here. I have fixed this issue and posted some details here: https://bugzilla.mozilla.org/show_bug.cgi?id=1645046#c20

(Is there some way to get notified when a bug is filed for my own site?)

[karlcow]

@steffenweber Thanks a lot for the comment.

About the

(Is there some way to get notified when a bug is filed for my own site?)

We have an issue about this on https://github.com/webcompat/webcompat.com/issues/3224

One hacky way of getting information would be to do this
https://github.com/webcompat/web-bugs/issues?q=is%3Aissue+%22computerbase+de%22+in%3Atitle