search

obsproject / obs-browser

CEF-based OBS Studio browser plugin
GNU General Public License v2.0
776 stars 220 forks source link

CSS Animated border does not animate in browser source #339

Closed billyjbryant closed 2 years ago

billyjbryant commented 2 years ago

Operating System Info

Windows 11

Other OS

No response

OBS Studio Version

27.1.3

OBS Studio Version (Other)

No response

OBS Studio Log URL

https://obsproject.com/logs/JzlaUfDC_u6PysSp

OBS Studio Crash Log URL

No response

Expected Behavior

I am attempting to use a browser source with a local html file that contains a pure CSS animated border. The border animation works when testing on Microsoft Edge Version 96.0.1054.62 (Official build) (64-bit) and Chrome Version 96.0.4664.110 (Official Build) (64-bit). It does not work on Firefox, but as the obs-browser uses chromium, I don't see this as an issue.

I expect that with the browser animation working in Edge & Chrome (Both Chromium based) that it would work in OBS.

Current Behavior

The border loads, the gradient sets to its initial position but doesn't animate.

Steps to Reproduce

  1. Create a browser source with any height and width (The border should adjust properly)
  2. Use a local file with the following content: 
    
<!DOCTYPE html>
<html lang="en">
Rotating Border 


3. Save the source
4. View the border, it should animate, but doesn't. 

### Anything else we should know?

_No response_
gxalpha commented 2 years ago

Could you test if this happens with the newest master build? It has a newer version of CEF than the current release. You can download it from GitHub Actions on the obs-studio repository.

billyjbryant commented 2 years ago

I'll download and test

billyjbryant commented 2 years ago

@gxalpha testing with the latest build works as expected.

VodBox commented 2 years ago

The current release build of OBS uses Chromium 75. I see you are using the @property syntax to define a syntax and allow your custom property to be animatable, however that CSS at-rule is only implemented in Chromium 85 onwards, and the alternative JS method with registerProperty is still only in 78 onwards.

The latest master uses Chromium 95 where this will work.

billyjbryant commented 2 years ago

Thank you for the update @VodBox!

dodgepong commented 2 years ago

Can you try this on the new beta? https://github.com/obsproject/obs-studio/releases/tag/27.2.0-beta1