# Perspective Page Transitions?

**URL:** <https://forum.inductiveautomation.com/t/perspective-page-transitions/53975>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [December 9, 2021, 10:33pm UTC](https://forum.inductiveautomation.com/t/perspective-page-transitions/53975 "2021-12-09T22:33:15Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [December 9, 2021, 10:33pm UTC](https://forum.inductiveautomation.com/t/perspective-page-transitions/53975/1 "2021-12-09T22:33:15Z")

</div>

This might be one for you, @victordcq

Is there a way to control how pages transition? See below screencapture showing changing pages with a brief flash to white. I want it just to not flash to white and keep the red - is this possible?

I’m curious though if I could do a fade out or slide in or something slightly more fancy? My guess is that it might rely on javascript so it wouldn’t be possible.

[https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/3/b349b9f72a8016c27adbeeaa848786458a88fd7f.mp4](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/3/b349b9f72a8016c27adbeeaa848786458a88fd7f.mp4)

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [December 10, 2021, 12:29am UTC](https://forum.inductiveautomation.com/t/perspective-page-transitions/53975/2 "2021-12-10T00:29:56Z")

</div>

Does your entire project have that red background? if so, you could attempt to style `.center.view-parent` such that it always has the red background. I suspect that “general” always-present container is what you’re seeing flash as one page is removed, but before the next page has fully rendered.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [December 10, 2021, 7:46am UTC](https://forum.inductiveautomation.com/t/perspective-page-transitions/53975/3 "2021-12-10T07:46:08Z")

</div>

The red only applies to the mobile version of the app - it’s the customer’s logo/theme colour.

It worked 🙂 I used @victordcq 's magic hack by adding this into the background image style in my red colour’s P.Style:

```auto
} .center.view-parent{background-color:#b51f25;}{

```

Thanks!

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [December 10, 2021, 7:49am UTC](https://forum.inductiveautomation.com/t/perspective-page-transitions/53975/4 "2021-12-10T07:49:28Z")

</div>

🧙  
Yeah handeling the routing would require js.

you have to be careful if there are many other styles in that stylesclass tho  
if you have you might want to re-add the stylclasses name before the last bracket. because else it could escape some of the styles if the css orders backgroundimage aboce something else

`}.center.view-parent{background-color:#b51f25;} .psc-PStyle{`

not sure tho ,never had the need to

---

<div class="post-metadata">

**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\
**Post date:** [November 9, 2022, 7:38pm UTC](https://forum.inductiveautomation.com/t/perspective-page-transitions/53975/5 "2022-11-09T19:38:58Z")

</div>

That javascript injection, it only works in one direction?

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [November 9, 2022, 11:20pm UTC](https://forum.inductiveautomation.com/t/perspective-page-transitions/53975/6 "2022-11-09T23:20:15Z")

</div>

> [@zacharyw.larson](#):
>
> That javascript injection

The examples above are CSS not JS

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 10, 2022, 8:25am UTC](https://forum.inductiveautomation.com/t/perspective-page-transitions/53975/7 "2022-11-10T08:25:52Z")

</div>

This was css indeed, what do you mean with one direction tho?

---

<div class="post-metadata">

**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\
**Post date:** [November 10, 2022, 2:27pm UTC](https://forum.inductiveautomation.com/t/perspective-page-transitions/53975/8 "2022-11-10T14:27:55Z")

</div>

Probably being paranoid.  
I read about nat slipstreaming attacks yesterday.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 10, 2022, 3:02pm UTC](https://forum.inductiveautomation.com/t/perspective-page-transitions/53975/9 "2022-11-10T15:02:26Z")

</div>

The nat slipstreaming attacks come from someone opening a malisious link. Not from editing JS.

Dont let users store anything in the markdown component though (when html isnt escaped)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/1/b199b09f04449e37906614d2e397dc8c6bbb9c62.png)

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [June 28, 2023, 9:56am UTC](https://forum.inductiveautomation.com/t/perspective-page-transitions/53975/11 "2023-06-28T09:56:54Z")

</div>

I'm having the same issue, where there's a flash of white while the styles are loading/being applied.

I have little hope of fixing this, but maybe there are ways of mitigating it ?

Version is 8.1.17,  
and I'm using view based navigation.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [June 28, 2023, 12:25pm UTC](https://forum.inductiveautomation.com/t/perspective-page-transitions/53975/12 "2023-06-28T12:25:07Z")

</div>

no not rly easily no

you can attempt to add in the link to all css files i guess  
no idea if that will work tho

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [June 28, 2023, 12:40pm UTC](https://forum.inductiveautomation.com/t/perspective-page-transitions/53975/13 "2023-06-28T12:40:25Z")

</div>

No access to css files.  
Well, not on the prod machine at least.

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [June 28, 2023, 12:51pm UTC](https://forum.inductiveautomation.com/t/perspective-page-transitions/53975/14 "2023-06-28T12:51:33Z")

</div>

Sometimes, playing with Persistence and the state the views are saved will impact how they look when loading. Not sure if it will help you @pascal.fragnoud but worth a try IMO.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [June 28, 2023, 1:09pm UTC](https://forum.inductiveautomation.com/t/perspective-page-transitions/53975/15 "2023-06-28T13:09:04Z")

</div>

hehe well you can preload styles if you have this issue when changing theme 🧙 (i think or my pc is to fast to notice) you can preload styles i put this script on my header docked view.

going from dark to dark-cool nolonger flashes white

```auto
	
		
	code = """<img style='display:none' src='/favicon.ico' onload=\"
		if(document.head.childNodes[document.head.childNodes.length-1].getAttribute('rel')=='preload'){return;}
		var thisStyle = document.createElement('link');			
		thisStyle.rel = 'preload';
		thisStyle.as = 'style';
		thisStyle.href = 'http://localhost:8088/data/perspective/themes/dark.css';
		document.head.appendChild(thisStyle);		
		thisStyle.href = 'http://localhost:8088/data/perspective/themes/dark-cool.css';
		document.head.appendChild(thisStyle);
		thisStyle.href = 'http://localhost:8088/data/perspective/themes/dark-warm.css';
		document.head.appendChild(thisStyle);
		
				
	\"></img>""".replace("\n", "").replace("\t", "")
	return code
		

```

> **the markdown**
>
> ```auto
> [
> {
> "type": "ia.display.markdown",
> "version": 0,
> "props": {
> "markdown": {
> "escapeHtml": false
> }
> },
> "meta": {
> "name": "Markdown"
> },
> "position": {
> "shrink": 0,
> "basis": 0
> },
> "custom": {},
> "propConfig": {
> "props.source": {
> "binding": {
> "type": "expr",
> "config": {
> "expression": "\"\""
> },
> "transforms": [
> {
> "code": "\t\n\tcode = \"\"\"<img style='display:none' src='/favicon.ico' onload=\\\"\n\t\tif(document.head.childNodes[document.head.childNodes.length-1].getAttribute('rel')=='preload'){return;}\n\t\tvar thisStyle = document.createElement('link');\t\t\t\n\t\tthisStyle.rel = 'preload';\n\t\tthisStyle.as = 'style';\n\t\tthisStyle.href = 'http://localhost:8088/data/perspective/themes/dark.css';\n\t\tdocument.head.appendChild(thisStyle);\t\t\n\t\tthisStyle.href = 'http://localhost:8088/data/perspective/themes/dark-cool.css';\n\t\tdocument.head.appendChild(thisStyle);\n\t\tthisStyle.href = 'http://localhost:8088/data/perspective/themes/dark-warm.css';\n\t\tdocument.head.appendChild(thisStyle);\n\t\t\n\t\t\t\t\n\t\\\"></img>\"\"\".replace(\"\\n\", \"\").replace(\"\\t\", \"\")\n\treturn code\n\t\t",
> "type": "script"
> }
> ]
> }
> }
> }
> }
> ]
> 
> ```

note localhost will probably need to be the ip if your server, i think, check it here when you run it on a client **after changing style atleast once** :

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/3/3371fc6c12f206b4999913182a179e98b020f91b.png)

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [June 28, 2023, 1:20pm UTC](https://forum.inductiveautomation.com/t/perspective-page-transitions/53975/16 "2023-06-28T13:20:28Z")

</div>

It actually does make things a bit better.  
Good idea, that's a start !

I also made a version where every page is embedded into a main page, and I handle navigation by sending messages with the view path I want to display... I does reduce considerably the flickering, since the background doesn't change anymore, but some other things still flash.

I'll try combining both solutions.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [June 28, 2023, 1:28pm UTC](https://forum.inductiveautomation.com/t/perspective-page-transitions/53975/17 "2023-06-28T13:28:32Z")

</div>

Won't work in my case.  
I won't go into details but I'm plugging things into an existing project where theme handling is... quite exotic. It doesn't actually use themes, and barely any css. It's a pain and a half to deal with and maintain, but that's how it is.