1968162 - Can't switch slides on slideshare.net by clicking on slides

Status: RESOLVED WORKSFORME

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

Description

[Jeff Muizelaar [:jrmuizel]]

This works in Chrome.

Comment 1

[Alice0775 White]

Strange behavior that it works on pages 8-11,19-32,37,39-41,44,58...

Comment 2

[Holger Benl [:hbenl]]

The slides are scrolled into view using window.scrollBy(), which is referenced exactly once in the sources. If you break there after clicking on one of the slides that work and go up 3 stackframes, you're paused at the last statement of this code:

onClick: () => {
  if (u) {
    u(e);
    return
  }
  S(e)
},

u is a click handler that is passed to the React component as a prop, if it isn't set then S is called instead, which scrolls the slide into view. If I set a logpoint in the code above logging u, I see that it's undefined when I click on one of the slides that work and is a function for those that don't work. If I set the same logpoint in Chrome, u is undefined for all slides.
I couldn't figure out yet why this is different in Firefox.

Comment 3

[Holger Benl [:hbenl]]

Hmm, the site is shipping different code for Chrome and Firefox, which makes it hard to compare. I also noticed that in Firefox the blur handlers for the slide previews are not consistently called (hence the popup that shows up when hovering over some of the slide previews doesn't disappear when the mouse leaves the slide preview, unlike Chrome). Maybe the Firefox version of the site is simply buggy.

Comment 4

[Randell Jesup [:jesup] (needinfo me)]

Chromemask doesn't help. I haven't verified we're actually getting the same code as chrome with the mask on, though

Comment 5

[Randell Jesup [:jesup] (needinfo me)]

With Chromemask the code I looked at all looked to be the same size (to the level of size exposed in devtools interface; I didn't go and check the size headers, for example). I also tried disabling ETP; no change (no surprise)

Comment 6

[Randell Jesup [:jesup] (needinfo me)]

Note also I didn;'t examine all the code files

Comment 7

[Randell Jesup [:jesup] (needinfo me)]

Tom, you might want to have a look; I'm not so good at the devtools level

Comment 8

[Holger Benl [:hbenl]]

Hmm, the site is shipping different code for Chrome and Firefox

I spoke too soon, the code is actually the same, I was confused by the site using different focus and blur handlers for the slide previews in Firefox vs. Chrome (and the handlers that it uses in Firefox are in a webpack chunk that did not get loaded in Chrome).
For scrolling the slides into view, the site seems to use the same handlers in Firefox and Chrome.

Comment 9

[Holger Benl [:hbenl]]

I found the code that is switching between the different components for the slide previews:

let e = CSS.supports('selector(:popover-open)'),
t = CSS.supports('anchor-name', '--foo-bar');
h(e && t)

If I patch CSS.supports() to return true for CSS.supports('anchor-name', '--foo-bar') before the page is rendered then switching slides starts working for all slides. However, the popovers that are shown when hovering over a slide preview are misplaced, covering up most and sometimes all of the slide preview, making it hard or impossible to click on it, so an intervention wouldn't really fix the site.
So this is a combination of a missing feature (anchor positioning) in Firefox and a site bug in its fallback code for browsers that don't support anchor positioning yet.

Comment 10

[Jeff Muizelaar [:jrmuizel]]

This also reproduces in Safari

Comment 11

[Jeff Muizelaar [:jrmuizel]]

But it looks like they fixed it. Holger, is it easy for you to check what changed?

Comment 12

[Holger Benl [:hbenl]]

All I can say is that the changes are non-trivial:

• the React component trees for the slide previews used to look different in Firefox vs. Chrome, now they look the same
• the focus and blur handlers mentioned in Comment 8 are now the same in both browsers
• the CSS.supports() calls mentioned in Comment 9 now appear in two different functions