Bug 261690 – REGRESSION (265004@main): Vimeo video controls rendered larger and without volume slider

• Status: RESOLVED
• Resolution: FIXED
• Component: New Bugs

[Jon]

Created attachment 467741 [details]
STP screenshot.

Safari Tech Preview 178 (earlier versions too) renders the embedded Vimeo video controls without the volume slider and larger than Safari (16.6 (18615.3.12.11.2)) and Chrome. For example, the video on https://www.pointfree.co/episodes/ep250-testing-debugging-macros-part-1 renders slightly differently, with larger controls and no mouseover volume slider on the STP. See the attached screen shots for an example.

[Jon]

Created attachment 467742 [details]
Safari screenshot

[Radar WebKit Bug Importer]

<rdar://problem/115678103>

[Karl Dubost]

The control slider is

```
<div role="slider"
     class="VolumeControl_module_volumeControl__7dca4d92 volume shared_module_focusable__63d26f6d"
     tabindex="0"
     aria-valuenow="1"
     aria-valuetext="100%"
     aria-label="Volume (use up/down arrow keys to change)"
     aria-valuemin="0"
     aria-valuemax="1"
     data-volume-control="true"
     style="display: none;">
    <div class="VolumeControl_module_volumeBar__7dca4d92">
        <div class="VolumeControl_module_volumeBarFill__7dca4d92"
             style="height: 100%;"></div>
        <div class="VolumeControl_module_sliderHandle__7dca4d92"
             style="bottom: 100%;"></div>
    </div>
</div>
```

It has display: none by default. When moving the mouse over the element it is supposed to remove the display: none to show the slider. If we artificially do it the slider is visible. 

The event is indeed happening in Safari 16.6 but not in STP 177.

[Tim Nguyen (:ntim)]

The regression is somewhere in https://commits.webkit.org/compare/265005@main...264992@main

[Antoine Quint]

More specifically, this regressed with https://commits.webkit.org/265004@main when Navigator.standalone was enabled on macOS. I expect Vimeo used the availability of this property to determine they were running on iOS and displaying a volume slider would not make sense there since the media volume cannot be controlled at a per-media level.

[Karl Dubost]

This is happening in https://f.vimeocdn.com/p/4.25.8/js/player.js

with 
        _n = "MacIntel" === navigator.platform && void 0 !== navigator.standalone,


A first attempt at contacting Vimeo has been done on 
https://github.com/webcompat/web-bugs/issues/127942#issuecomment-1744034303

[Karl Dubost]

we could imagine a Quirk that would disable navigator.standalone on player.js (not the full domain Vimeo.com, because it would unintended consequences).

[Jon]

STP Release 180 (Safari 17.4, WebKit 19618.1.1.2) on Sonoma now renders the floating volume slider, though it's still at the larger size.

[Karl Dubost]

Jon, 

s it larger? 
I see there is a kind of magnifier effect but this is happening on chrome too. 
If I compare side by side I get the exact same behavior in Chrome, Safari and Firefox.

[Jon]

Yes, STP (Release 180 (Safari 17.4, WebKit 19618.1.1.2)) still renders larger than shipping Safari (Version 17.0 (19616.1.27.211.1)) on Sonoma.

[Karl Dubost]

Created attachment 468202 [details]
rendering in Safari, firefox, chrome

Tested on macOS 14.2
---
Safari Technology Preview  179           19617.1.8.1
Firefox Nightly            120.0a1       12023.10.11
Google Chrome Canary       120.0.6064.0  6064.0

[Karl Dubost]

And same rendering with STP 180.

[Jon]

Created attachment 468203 [details]
Safari on top, STP bottom

I've stacked them here, Safari on top, STP on bottom. Now, if the Safari rendering is now incorrect, that's fine, it seems to work correctly now anyway.

[Karl Dubost]

Created attachment 468204 [details]
rendering in Safari, firefox, chrome

And here stacked for me. 

from top to bottom
safari, firefox, chrome.

Note that the issue is with Vimeo.
Not Safari :) 
Vimeo was using navigator.standalone as a user agent sniffing mechanism which changed the layout. 

see https://github.com/webcompat/web-bugs/issues/127942#issuecomment-1744034303

Someone from vimeo commented there. 

The only way I can reproduce the layout of your screenshot is by doing zoom. 
Could you try Command + 0 to come back to the default size (just in case).

[Jon]

There's no zoom applied. The Actual Size command is grayed out and Command - + and Command - - properly change both the video viewer and text size. In my screen shots, though cropped out, the text was the same size in both. They're both fully functional.

[Karl Dubost]

1. Going to https://www.pointfree.co/episodes/ep250-testing-debugging-macros-part-1
2. with macOS 14 and Safari STP 180

Results:
No difference than other browsers on a MacBook Pro M2. 
I'm asking other people to try to reproduce.

I propose we close this. The slider issue has been solved by Vimeo, which was really a functional issue. 


And if there is something remaining about the size of the controls. 

Jon, could you open a bug on https://webcompat.com/
with screenshot and devices/browsers references.  

Thanks.