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.
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.
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:
} .center.view-parent{background-color:#b51f25;}{
Thanks!
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
That javascript injection, it only works in one direction?
The examples above are CSS not JS
This was css indeed, what do you mean with one direction tho?
Probably being paranoid.
I read about nat slipstreaming attacks yesterday.
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)
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.
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
No access to css files.
Well, not on the prod machine at least.
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.
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
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
[
{
"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:
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.
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.
