Browse Panel and web page size inconsistent

[mhartington]

Platform

Operating system and version: macOS 11.2.1 OBS Studio version: 26.1.2-141-g31a9dc384 (built from source)

Expected Behavior

A browser panel and the loaded webpage should be the same size once loaded or if the panel is resized

Current Behavior

Building from source to test the new browser panel. If a web page is loaded the size of the embedded web page will be greater than the actual panel size from OBS.

Here in this gif, I'm loading a Twitch dashboard, but the rendered window is much larger than the actual window UI https://user-images.githubusercontent.com/2835826/107712632-be176d80-6c97-11eb-8fb8-f2ca99031661.mov

Steps to Reproduce

1. Open version of OBS on mac with browser panel dock enabled
2. create new panel pointing to a web page I created this sample test that just prints the JS-window to the html https://cdpn.io/mhartington/debug/LYbbrpa/xnMabmZNEpLr
3. Open the dock and try to resize the panel
4. Open the URL in your browse and observe the size report differenec

Additional information

Here are two additional screenshots from the url above, one is fullscreen on a 16" macbook pro and the other is from obs, the size difference is very different.

Sorry in advanced if this is not the right place to post the issue. Let me know if I should report this to the main OBS repo instead.

Session Logfile

``` 18:59:53.866: CPU Name: Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz 18:59:53.866: CPU Speed: 2300MHz 18:59:53.866: Physical Cores: 8, Logical Cores: 16 18:59:53.866: Physical Memory: 32768MB Total 18:59:53.866: OS Name: Mac OS X 18:59:53.866: OS Version: Version 11.2.1 (Build 20D74) 18:59:53.866: Kernel Version: 20.3.0 18:59:53.868: hotkeys-cocoa: Getting keyboard keys failed 18:59:53.868: hotkeys-cocoa: Getting keyboard keys failed 18:59:53.868: hotkeys-cocoa: Getting keyboard keys failed 18:59:53.868: hotkeys-cocoa: Getting keyboard keys failed 18:59:53.868: hotkeys-cocoa: Using layout 'com.apple.keylayout.US' 18:59:53.869: Current Date/Time: 2021-02-11, 18:59:53 18:59:53.869: Browser Hardware Acceleration: true 18:59:53.869: Portable mode: false 18:59:53.957: OBS 26.1.2-141-g31a9dc384 (mac) 18:59:53.957: --------------------------------- 18:59:53.958: --------------------------------- 18:59:53.958: audio settings reset: 18:59:53.958: samples per sec: 48000 18:59:53.958: speakers: 2 18:59:53.959: --------------------------------- 18:59:53.959: Initializing OpenGL... 18:59:53.982: Loading up OpenGL on adapter ATI Technologies Inc. AMD Radeon Pro 5500M OpenGL Engine 18:59:53.982: OpenGL loaded successfully, version 4.1 ATI-4.2.15, shading language 4.10 18:59:54.075: --------------------------------- 18:59:54.075: video settings reset: 18:59:54.075: base resolution: 1920x1080 18:59:54.075: output resolution: 1920x1080 18:59:54.075: downscale filter: Bicubic 18:59:54.075: fps: 60/1 18:59:54.075: format: NV12 18:59:54.075: YUV mode: 709/Partial 18:59:54.075: NV12 texture support not available 18:59:54.075: Audio monitoring device: 18:59:54.075: name: Default 18:59:54.075: id: default 18:59:54.076: --------------------------------- 18:59:54.077: Failed to load 'en-US' text for module: 'decklink-captions.so' 18:59:54.078: Failed to load 'en-US' text for module: 'decklink-ouput-ui.so' 18:59:54.085: os_dlopen(libpython3.9.dylib->libpython3.9.dylib): dlopen(libpython3.9.dylib, 257): image not found 18:59:54.085: 18:59:54.085: [Python] Could not load library: libpython3.9.dylib 18:59:54.144: A DeckLink iterator could not be created. The DeckLink drivers may not be installed 18:59:54.144: No blackmagic support 18:59:54.146: [mac-virtualcam] version=1.3.0 18:59:54.197: obs_register_encoder: Encoder id 'vt_h264_hw' already exists! Duplicate library? 18:59:54.197: [VideoToolbox encoder]: Adding VideoToolbox H264 encoders 18:59:54.200: [obs-browser]: Version 2.13.1 18:59:54.200: [obs-browser]: CEF Version 85.0.0-HEAD.2273+g93b66a0+chromium-85.0.4183.121 18:59:54.224: VLC found, VLC video source enabled 18:59:54.225: [Move Transition] loaded version 2.2.0 18:59:54.225: --------------------------------- 18:59:54.225: Loaded Modules: 18:59:54.225: move-transition.so 18:59:54.225: vlc-video.so 18:59:54.225: text-freetype2.so 18:59:54.225: rtmp-services.so 18:59:54.225: obs-x264.so 18:59:54.225: obs-vst.so 18:59:54.225: obs-transitions.so 18:59:54.225: obs-outputs.so 18:59:54.225: obs-filters.so 18:59:54.225: obs-ffmpeg.so 18:59:54.225: obs-browser.so 18:59:54.225: mac-vth264.so 18:59:54.225: mac-virtualcam.so 18:59:54.225: mac-syphon.so 18:59:54.225: mac-decklink.so 18:59:54.225: mac-capture.so 18:59:54.225: mac-avcapture.so 18:59:54.225: image-source.so 18:59:54.225: frontend-tools.so 18:59:54.225: decklink-ouput-ui.so 18:59:54.225: decklink-captions.so 18:59:54.225: coreaudio-encoder.so 18:59:54.225: --------------------------------- 18:59:54.225: ==== Startup complete =============================================== 18:59:54.240: All scene data cleared 18:59:54.240: ------------------------------------------------ 18:59:54.303: coreaudio: device 'Conf' initialized 18:59:54.303: [Loaded global audio device]: 'Desktop Audio' 18:59:54.341: adding 21 milliseconds of audio buffering, total audio buffering is now 21 milliseconds (source: Desktop Audio) 18:59:54.341: 18:59:54.366: Camera: Could not initialize device with unique ID '0x36000000fd90066' 18:59:54.637: coreaudio: device 'WH-1000XM3' initialized 18:59:54.671: adding 42 milliseconds of audio buffering, total audio buffering is now 64 milliseconds (source: Mic) 18:59:54.671: 18:59:55.023: Switched to scene 'Scene' 18:59:55.023: ------------------------------------------------ 18:59:55.023: Loaded scenes: 18:59:55.023: - scene 'Scene': 18:59:55.023: - source: 'Mic' (coreaudio_input_capture) 18:59:55.023: - source: 'Color Source' (color_source_v3) 18:59:55.023: - source: 'display layout' (image_source) 18:59:55.023: - source: 'Social' (image_source) 18:59:55.023: - source: 'Display Capture' (display_capture) 18:59:55.023: - source: 'Camera' (av_capture_input) 18:59:55.023: - source: 'Overlays' (group) 18:59:55.023: - source: 'Chat' (browser_source) 18:59:55.023: - source: 'Activity' (browser_source) 18:59:55.023: - scene 'Solo': 18:59:55.023: - source: 'Mic' (coreaudio_input_capture) 18:59:55.024: - source: 'Camera' (av_capture_input) 18:59:55.024: - scene 'AWFKB': 18:59:55.024: - source: 'Color Source' (color_source_v3) 18:59:55.024: - source: 'Pattern' (image_source) 18:59:55.024: - source: 'Be Right Back' (image_source) 18:59:55.024: - scene 'Starting Soon': 18:59:55.024: - source: 'Color Source' (color_source_v3) 18:59:55.024: - source: 'Timer' (text_ft2_source_v2) 18:59:55.024: - source: 'Getting Started' (image_source) 18:59:55.024: - source: 'Pattern' (image_source) 18:59:55.024: ------------------------------------------------ ```

[WizardCM]

This sounds DPI/scaling related. It's possible the panels somehow aren't respecting DPI scaling. Could you include an OBS session log?

[mhartington]

Sure, updated the issue to include it in the details

[PatTheMav]

Does this also happen when the panel is docked?

[mhartington]

It does

[WizardCM]

I wonder if removing this code on macOS would fix this issue:

https://github.com/obsproject/obs-browser/blob/194392f3367569159b337789fc702542cf976a60/panel/browser-panel.cpp#L245-L249

[PatTheMav]

That was added for Linux panel support iirc and I did my final tests before that was merged, so it is possible that this introduced the change.

UPDATE: I just disabled both instances of the change for macOS and it works fine now. Rule of thumb: macOS does HiDPi correct by itself.

[mhartington]

Just tested your pr @PatTheMav and it works when adding new panels, but when opening with existing browser docs, there is still some sizing issues. Looks like there's some extra margin/padding between the browser source and what OBS saying the size is.

For example, the tab bar for this browser doc is sized correctly, but the UI from the site is off by like 50pxs.

A more extreme example is below where the difference is a lot more

[PatTheMav]

Are the docks correctly sized when you close and re-open them? At least with the Twitch panels I can't get them to behave badly. Also I wouldn't be surprised if some bad "window state" might persist.

[mhartington]

@PatTheMav Not fully. It's kind of hit or miss. When I close the lower panels will be sized correct some of the times, but the chat (which is on the upper half next to the video preview) is almost never right.

[PatTheMav]

The pixel ratio calculations are disabled for macOS entirely and as far as I can see not used anywhere else in ons-browser code. I also cannot reproduce the issue anymore (I could very easily reproduce the original issue), sizes are all as expected.

Can you try and create a new profile, add the panels and check if you can reproduce the issue? If so, please share the reproduction steps. Otherwise we cannot rule out that it's an unfortunate quirk of your current settings.

[mhartington]

Yeah, I dont know what else to help debug this. I've cleaned out all my profiles/scenes/browser docks. Basically as close as I could get to a fresh install.

For reproductions..

• Start with fresh UI, fresh profile, fresh scene collection
• Create new browser ui and point to any website (http://github.com)
• Dock the new window in the main UI, in mine I put it to the left of the preview ui.
• Quit OBS
• Open OBS again, observe UI being sized incorrectly.

Could this be in OBS it self? Are there any tips for debugging this further?

[PatTheMav]

Quitting OBS between runs does the trick, so I was finally able to reproduce it.

Usually the only way to debug this is to follow the guide in our wiki regarding a "proxy" project in Xcode as you need to run the bundled app (CEF won't work with an unbundled macOS app). The tricky part is to get a breakpoint in the code (because it won't be able to use breakpoints set in the actual Xcode project). But once you got in there you can set log outputs at specific parts of a panel's lifetime and e.g. output current sizes.

EDIT: So I ran a quick test and the size reported by Qt at the time the panel is created is exactly what CEF gets and the website represents that size. I have a hunch that the whole thing probably works fine as long as panels are detached and when they are in an attached stage some resizing isn't properly reported the CEF.

[PatTheMav]

@mhartington I just force-pushed a new commit on the PR that - at least on my machine - fixed the reported behaviour.

I had to "undo" the changes introduced to panels by the PR for Linux support - I admit I don't fully understand why, but panels don't require a whole lot effort to make sizing/resizing work properly on macOS.

[mhartington]

That works perfectly!