# CCG with Vite.js

**URL:** <https://casparcgforum.org/t/ccg-with-vite-js/6145>\
**Category:** General\
**Created:** [November 1, 2023, 12:38pm UTC](https://casparcgforum.org/t/ccg-with-vite-js/6145 "2023-11-01T12:38:54Z")\
**Posts on this page:** 17\
**Page:** 2

<div class="post-metadata">

**Author:** ![vimlesh1975](https://casparcgforum.org/user_avatar/casparcgforum.org/vimlesh1975/32/1608_2.png) [@vimlesh1975](https://casparcgforum.org/u/vimlesh1975)\
**Post date:** [November 2, 2023, 8:46am UTC](https://casparcgforum.org/t/ccg-with-vite-js/6145/21 "2023-11-02T08:46:28Z")

</div>

I tested on server 2.4 dated 19.10.23.

---

<div class="post-metadata">

**Author:** ![andersveje](https://casparcgforum.org/letter_avatar_proxy/v4/letter/a/f475e1/32.png) [@andersveje](https://casparcgforum.org/u/andersveje)\
**Post date:** [November 2, 2023, 9:03am UTC](https://casparcgforum.org/t/ccg-with-vite-js/6145/22 "2023-11-02T09:03:44Z")

</div>

can you send me a link to this version then I’ll try to download the exact version.

---

<div class="post-metadata">

**Author:** ![vimlesh1975](https://casparcgforum.org/user_avatar/casparcgforum.org/vimlesh1975/32/1608_2.png) [@vimlesh1975](https://casparcgforum.org/u/vimlesh1975)\
**Post date:** [November 2, 2023, 9:14am UTC](https://casparcgforum.org/t/ccg-with-vite-js/6145/23 "2023-11-02T09:14:32Z")

</div>

[https://casparcg.com/builds/CasparCG%20Server/master/](https://casparcg.com/builds/CasparCG%20Server/master/)

---

<div class="post-metadata">

**Author:** ![andersveje](https://casparcgforum.org/letter_avatar_proxy/v4/letter/a/f475e1/32.png) [@andersveje](https://casparcgforum.org/u/andersveje)\
**Post date:** [November 2, 2023, 9:45am UTC](https://casparcgforum.org/t/ccg-with-vite-js/6145/24 "2023-11-02T09:45:31Z")

</div>

That sorted it for me. thanks 😃 last question, do you know what version of chromium its running?

---

<div class="post-metadata">

**Author:** ![didikunz](https://casparcgforum.org/user_avatar/casparcgforum.org/didikunz/32/7_2.png) [@didikunz](https://casparcgforum.org/u/didikunz)\
**Post date:** [November 2, 2023, 9:53am UTC](https://casparcgforum.org/t/ccg-with-vite-js/6145/25 "2023-11-02T09:53:58Z")

</div>

You can play [https://www.whatismybrowser.com/](https://www.whatismybrowser.com/) as a web-page on Caspar and it will show it.

---

<div class="post-metadata">

**Author:** ![vimlesh1975](https://casparcgforum.org/user_avatar/casparcgforum.org/vimlesh1975/32/1608_2.png) [@vimlesh1975](https://casparcgforum.org/u/vimlesh1975)\
**Post date:** [November 2, 2023, 9:54am UTC](https://casparcgforum.org/t/ccg-with-vite-js/6145/26 "2023-11-02T09:54:00Z")

</div>

![image](https://casparcgforum.org/uploads/default/original/2X/7/7b7543522c1e27a4238cd4b4a71f7def3fadced2.png)

---

<div class="post-metadata">

**Author:** ![andersveje](https://casparcgforum.org/letter_avatar_proxy/v4/letter/a/f475e1/32.png) [@andersveje](https://casparcgforum.org/u/andersveje)\
**Post date:** [November 2, 2023, 10:20am UTC](https://casparcgforum.org/t/ccg-with-vite-js/6145/27 "2023-11-02T10:20:39Z")

</div>

is there a way to update the chromium?

---

<div class="post-metadata">

**Author:** ![didikunz](https://casparcgforum.org/user_avatar/casparcgforum.org/didikunz/32/7_2.png) [@didikunz](https://casparcgforum.org/u/didikunz)\
**Post date:** [November 2, 2023, 10:34am UTC](https://casparcgforum.org/t/ccg-with-vite-js/6145/28 "2023-11-02T10:34:38Z")

</div>

In theory yes, you need a good knowledge of c++ programming to do that. As Caspar is open source, you can fork the source code and do whatever you want with it. The core team usually updates Chromium to the latest version, whenever they issue a new CasparCG version. But as Caspar has a slower release cycle, than Chromium (with a multi-billion dollar company behind it) we usually end up using older versions of chromium after a few weeks.

May I ask why you would need a newer version? What do you try, that is not working with an older Chromium?

---

<div class="post-metadata">

**Author:** ![andersveje](https://casparcgforum.org/letter_avatar_proxy/v4/letter/a/f475e1/32.png) [@andersveje](https://casparcgforum.org/u/andersveje)\
**Post date:** [November 2, 2023, 10:42am UTC](https://casparcgforum.org/t/ccg-with-vite-js/6145/29 "2023-11-02T10:42:31Z")

</div>

![ChromeBrowser](https://casparcgforum.org/uploads/default/original/2X/f/f0f48ac98a8ecc61943a2735124df5f9e601de59.png)  
 ![Chromium_CCG](https://casparcgforum.org/uploads/default/original/2X/2/292ecb4144b25103ab94f83fe086bdba6b48bbb4.png)

Its because I have an idea that chromium in CCG is outdated. as you can see on the pictures. no problem running in browser, but on CCG its doing some kind of wrapping?

---

<div class="post-metadata">

**Author:** ![didikunz](https://casparcgforum.org/user_avatar/casparcgforum.org/didikunz/32/7_2.png) [@didikunz](https://casparcgforum.org/u/didikunz)\
**Post date:** [November 2, 2023, 10:52am UTC](https://casparcgforum.org/t/ccg-with-vite-js/6145/30 "2023-11-02T10:52:39Z")

</div>

> [@andersveje](#):
>
> but on CCG its doing some kind of wrapping?

That’s why I never try in the browser 😄 Are you sure, that the templates size is the same as the output of Caspar (1920x1080)? As to me it also looks vertically squeezed.

---

<div class="post-metadata">

**Author:** ![andersveje](https://casparcgforum.org/letter_avatar_proxy/v4/letter/a/f475e1/32.png) [@andersveje](https://casparcgforum.org/u/andersveje)\
**Post date:** [November 2, 2023, 10:59am UTC](https://casparcgforum.org/t/ccg-with-vite-js/6145/31 "2023-11-02T10:59:03Z")

</div>

![CCGchromium](https://casparcgforum.org/uploads/default/original/2X/1/15dbd3ff3d7cee0b4c10906d9ff517d363869627.png)  
It was not in that picture but tried other resolution, still same problem…

i get your point about not testing in browser 😅

---

<div class="post-metadata">

**Author:** ![Andrea](https://casparcgforum.org/user_avatar/casparcgforum.org/andrea/32/775_2.png) [@Andrea](https://casparcgforum.org/u/Andrea)\
**Post date:** [November 2, 2023, 11:03am UTC](https://casparcgforum.org/t/ccg-with-vite-js/6145/32 "2023-11-02T11:03:11Z")

</div>

you can test your template in the same version of Chrome, I do that when something is not working properly, since the debugging is a bit easier

you can find older versions here:  
[Google Chrome Older Versions Download](https://www.slimjet.com/chrome/google-chrome-old-version.php)

it may not be related, but in html templates I have found different behavior for image sizing.  
If I define just one dimension, the image is always in the correct aspect ratio and ok.  
But if I define both width and height sometimes it warps the image to fit the area and sometimes it scales the image to fill the area.  
It happens to me for sure for svg but can’t remember for jpg or png.

So you may check in your css if something changes when playing with width and height.

---

<div class="post-metadata">

**Author:** ![didikunz](https://casparcgforum.org/user_avatar/casparcgforum.org/didikunz/32/7_2.png) [@didikunz](https://casparcgforum.org/u/didikunz)\
**Post date:** [November 2, 2023, 11:05am UTC](https://casparcgforum.org/t/ccg-with-vite-js/6145/33 "2023-11-02T11:05:46Z")

</div>

This is the main part of my templates CSS:

```auto
*,*:after,*:before{
	background:transparent; 
	box-sizing:border-box; 
	overflow:hidden; 
	font-smooth:always;
	-webkit-font-smoothing:antialiased;
}
body {
	overflow: hidden; 
	margin: 0; 
	width: 1920px; 
	background-color: transparent;
}

```

Maybe the webkit stuff is not needed. This makes the template be 1920px wide so that it does not scale at will. Maybe something like this helps. Mostly templates are only used in a defined resolution and don’t need to be responsive.

---

<div class="post-metadata">

**Author:** ![andersveje](https://casparcgforum.org/letter_avatar_proxy/v4/letter/a/f475e1/32.png) [@andersveje](https://casparcgforum.org/u/andersveje)\
**Post date:** [November 2, 2023, 11:51am UTC](https://casparcgforum.org/t/ccg-with-vite-js/6145/34 "2023-11-02T11:51:04Z")

</div>

You helped my troubleshooting. it wont work in old chromium. hope they will update chromium very quickly

---

<div class="post-metadata">

**Author:** ![andersveje](https://casparcgforum.org/letter_avatar_proxy/v4/letter/a/f475e1/32.png) [@andersveje](https://casparcgforum.org/u/andersveje)\
**Post date:** [November 2, 2023, 12:21pm UTC](https://casparcgforum.org/t/ccg-with-vite-js/6145/35 "2023-11-02T12:21:16Z")

</div>

i think its down to me using “text-wrap: nowrap;” only supported from chromium v.114

---

<div class="post-metadata">

**Author:** ![didikunz](https://casparcgforum.org/user_avatar/casparcgforum.org/didikunz/32/7_2.png) [@didikunz](https://casparcgforum.org/u/didikunz)\
**Post date:** [November 2, 2023, 5:17pm UTC](https://casparcgforum.org/t/ccg-with-vite-js/6145/36 "2023-11-02T17:17:59Z")

</div>

Is this not nearly the same as `overflow: visible;`?

---

<div class="post-metadata">

**Author:** ![andersveje](https://casparcgforum.org/letter_avatar_proxy/v4/letter/a/f475e1/32.png) [@andersveje](https://casparcgforum.org/u/andersveje)\
**Post date:** [November 3, 2023, 7:40am UTC](https://casparcgforum.org/t/ccg-with-vite-js/6145/37 "2023-11-03T07:40:27Z")

</div>

kind of, but this did it for me.

```auto
white-space: nowrap;

```

[Previous page](https://casparcgforum.org/t/ccg-with-vite-js/6145.md?page=1)