on 'non-phone' screen widths I only see purple.
I think this is due to element size issues.
After looking at the existing transformation:
1 - Do NOT use Translate, use the viewport to center in the view area.
2 - Just use Translate to center the the lower bar arch.
3 - Eventually... read the view width via element.clientWidth to center +x
4 - Eventually... read the vew height via element.clientHeight to position -y
...
https://stackoverflow.com/questions/7130397/how-do-i-make-a-div-full-screen
on 'non-phone' screen widths I only see purple. I think this is due to element size issues.
After looking at the existing transformation: 1 - Do NOT use Translate, use the viewport to center in the view area. 2 - Just use Translate to center the the lower bar arch. 3 - Eventually... read the view width via element.clientWidth to center +x 4 - Eventually... read the vew height via element.clientHeight to position -y ... https://stackoverflow.com/questions/7130397/how-do-i-make-a-div-full-screen