vimeo.com - design is broken

[karlcow]

URL: https://vimeo.com/

Browser / Version: Safari 17.4 Operating System: Mac OS X 10.15.7 Tested Another Browser: Yes Chrome

Problem type: Design is broken Description: Items are misaligned Steps to Reproduce:

1. with Safari on iPad in Portrait mode.
2. Go to https://vimeo.com/
3. Wait for the page to load without touching anything

Expected: The top menu is displayed in between Vimeo Logo and the the Join Icon.

Actual: The top menu is displayed with small characters under the Vimeo logo.

Scrolling or changing the rotation to landscape and back to portrait fixes the issue.

Browser Configuration

• None

From webcompat.com with ❤️

[karlcow]

The global nav is inside a div:

<div class="pb-4 flex flex-col overflow-y-auto gap-4 bg-global-nav-background w-full xl:bg-transparent xl:pb-0 xl:self-stretch pointer-events-auto absolute top-global-nav left-0 hidden"
     tabindex="0"
     style="max-height: calc(-4.825rem + 100vh);">

     …

    </div>

The width of the iPad viewport in portrait is 1280px, which is expected by the code of Vimeo as we can see in

var e;
if (null !== (e = document) && void 0 !== e && e.documentElement) {
  var r = function () {
      var e,
        r,
        t,
        o,
        n,
        a,
        i,
        c,
        l =
          null === (e = document) ||
          void 0 === e ||
          null === (r = e.documentElement) ||
          void 0 === r
            ? void 0
            : r.clientWidth,
        s =
          null === (t = document) ||
          void 0 === t ||
          null === (o = t.documentElement) ||
          void 0 === o
            ? void 0
            : o.clientHeight;
      u({
        width: l,
        height: s,
        isMobile:
          l <
          parseInt(
            (null === d ||
            void 0 === d ||
            null === (n = d.theme) ||
            void 0 === n ||
            null === (a = n.screens) ||
            void 0 === a
              ? void 0
              : a.md) || 768
          ),
        isUnder1280:
          l <
          parseInt(
            (null === d ||
            void 0 === d ||
            null === (i = d.theme) ||
            void 0 === i ||
            null === (c = i.screens) ||
            void 0 === c
              ? void 0
              : c.xl) || 1280
          ),
      });
    },
    t = (0, i.Ds)(r, 100);
  return (
    window.addEventListener("resize", t),
    r(),
    function () {
      return window.removeEventListener("resize", t);
    }
  );
}

During the initial load the document.documentElement.getBoundingClientRect().width is 834px Then at the very end it goes to 1280px.

in the process there is also an injection of a meta viewport

function p() {
            var e = arguments.length > 0 && void 0 !== arguments[0] && arguments[0],
                t = [a.default.createElement("meta", {
                    charSet: "utf-8"
                })];
            return e || t.push(a.default.createElement("meta", {
                name: "viewport",
                content: "width=device-width"
            })), t
        }

when taking a screen recording of the page, we can see that the layout starts with a mobile size layout probably because of the 834px, then it switches to a desktop layout, but in the process the toolbar is not being re-styled to fit the space.

[karlcow]

@vimeo has quite a number of people on GitHub that could probably help us to enter in contact with the right person to fix this issue.

I wonder if @juliewongbandue or @rkrishnan8594 could help us find someone in charge of the top toolbar for the Vimeo website and fix this bug.

[rkrishnan8594]

Hi @karlcow - thanks for sharing this bug. I'll forward this internally to find the right developer who can work on a fix.

[karlcow]

Thanks a lot! Do not hesitate to ask me more questions if/when needed. I'm part of the WebKit Webcompat team.

[karlcow]

This is tracked at Apple by rdar://121680739

[karlcow]

It seems it has been solved.