1522319 - translateZ(0) affects the scrollability of a menu on zalando.fr

Status: RESOLVED WORKSFORME

(Core :: Layout, defect, P3)

Description

[Karl Dubost💡 :karlcow]

This is a spin-off of https://webcompat.com/issues/22453

0. with a tablet on Firefox Android or
   a mobile device in landscape mode.
1. Access https://www.zalando.fr/boots-chaussure-montante-homme/?p=2
2. Try to type "taille" or "marque" (an overlay menu appears)
3. Try to scroll the list.

Actual:
The list doesn't scroll

Expected:
The list is scrolling.

The developers are blocking the scrolling of the body on this page with a common technique.

The body is already with overflow: auto;

<body style="
	margin-right: 0px;
	overflow: auto;">

This specific menu is rendered with

        {
          key: 'render',
          value: function () {
            var e = this,
            t = this.props,
            n = t.styles,
            r = t.children,
            o = t.enable;
            return i.default.createElement('div', {
              onMouseOver: function () {
                'boolean' != typeof o && e.disableBodyScroll()
              },
              onMouseOut: function (t) {
                'boolean' == typeof o || t.currentTarget.contains(t.relatedTarget) || e.enableBodyScroll()
              },
              className: n
            }, r)
          }
        }

which refers to

n.disableBodyScroll = function () {
          var e = window.document.body,
          t = window.innerWidth - e.clientWidth;
          e.style.marginRight = t + 'px',
          e.style.overflow = 'hidden'
        },
        n.enableBodyScroll = function () {
          var e = window.document.body;
          e.style.marginRight = '0px',
          e.style.overflow = 'auto'
        },
        n.checkScroll(n.props.enable),
        n

so indeed it sets onMouseOver, window.document.body.style.overflow = 'hidden'.

BUT something strange is happening.

Removing transform: translateZ(0); fixes the behavior. (fyi @emilio )

.cat_itemList-sgr85 {
	overflow-y: auto;
	overflow-x: hidden;
	min-height: 180px;
	max-height: 300px;
	height: 40vh;
	margin-right: 12px;
	color: #1a1a1a;
	/* transform: translateZ(0); */
}

reactivating it blocks the scrolling. This is reproducible.

Comment 1

[Xidorn Quan [:xidorn] UTC+10]

I can't reproduce it on my Android phone on landscape mode with Firefox Beta. Did the website fix this or something changed recently?

It would be great if there can be a minimal testcase to help reproducing it.

Comment 2

[Hiroyuki Ikezoe (:hiro)]

Karl, do you have an archived versions of the site? (I've never tried to see the site)

Comment 3

[Hiroyuki Ikezoe (:hiro)]

Oh I actually tried once before. :)

Comment 4

[Karl Dubost💡 :karlcow]

Here an archive https://send.firefox.com/download/56468d4440/#bp9WiCJlnRzEV8KYjBtIVA

Comment 5

[Firefox Bug Husbandry Bot]

Migrating Webcompat whiteboard priorities to project flags. See bug 1547409.

Comment 6

[Firefox Bug Husbandry Bot]

See bug 1547409. Migrating whiteboard priority tags to program flags.

Comment 7

[Mike Taylor [:miketaylr]]

This seems to be working now in Fennec Nightly and Fenix Preview. Thanks.