obsproject/obs-browser

CSS Animated border does not animate in browser source

billyjbryant opened this issue · 6 comments

billyjbryant commented

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">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Rotating Border</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100vw;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0);
        }

        div.rotating-border {
            --angle: 0deg;
            border: 2px solid;
            height: 100%;
            min-height: 100%;
            box-sizing: border-box;
            border-image: conic-gradient(from var(--angle), #66ffff, #0099ff, #6666ff, #9900ff, #6666ff, #0099ff, #66ffff) 1;
            -webkit-animation: 10s rotate ease-in-out infinite;
            -moz-animation: 10s rotate ease-in-out infinite;
            -o-animation: 10s rotate ease-in-out infinite;
            animation: 10s rotate ease-in-out infinite;
        }

        @-webkit-keyframes rotate {
            to {
                --angle: 360deg;
            }
        }

        @-moz-keyframes rotate {
            to {
                --angle: 360deg;
            }
        }

        @-o-keyframes rotate {
            to {
                --angle: 360deg;
            }
        }

        @keyframes rotate {
            to {
                --angle: 360deg;
            }
        }

        @property --angle {
            syntax: '<angle>';
            initial-value: 0deg;
            inherits: false;
        }
    </style>
</head>

<body>
    <div class="rotating-border">
    </div>
</body>

</html>
  1. Save the source
  2. View the border, it should animate, but doesn't.

Anything else we should know?

No response

gxalpha commented

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

I'll download and test

billyjbryant commented

@gxalpha testing with the latest build works as expected.

VodBox commented

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

Thank you for the update @VodBox!