Posts

CSS view transitions crashed my webpage

Image
 My 'view transitions' were causing my game to crash in Chrome. I got the 'Aw Shucks' message from Chrome. I thought maybe the 'view transitions' needed a lot of memory to prepare the new page state in the background. I had just added lots of SVG's to my game which may use up memory. But Chrome's tools showed the 'view transitions' only used a modest amount of memory compared to holding the total page size. It seems 'view transitions' are supported by most browsers now and are no longer experimental. I get the same 'Aw Shucks' message when I run my large game through the online JSHint on an old PC. I had a 'view-transition-name' on the 'root' element. I moved the name to smaller areas of the page that are actually displayed when the transition runs.  Chrome now crashed much less often. I removed the 'view transition' animation from the start of the game because the page changes a lot. This seemed to have st...
Post a Comment
Read more

AI can't do tricky changes

Image
 When I make a tricky change to my game, I laugh and think:        'at least, AI couldn't do this' 
Post a Comment
Read more

Leaving in old code, commented out

Image
 I leave in old code but comment it out. I can quickly see the old code. The code can look a bit messy. Other people might look at old versions in the source control system instead.
Post a Comment
Read more

Hiding SVG that is referenced later

Image
 An SVG would not show when it was hidden in a 'div' with 'display: none' and referenced later in a 'use' tag. To fix this, I put the SVG in a 'defs' tag inside an outer 'svg' tag. I hide this outer 'svg' by saying: 'position: absolute', 'height: 0' and 'width: 0'. 
Post a Comment
Read more

Making JavaScript and CSS slightly smaller

Image
 I save space by setting a variable called '_' to 'this' at the start of a function that uses 'this' a lot. Saying 'background: aqua' is shorter than saying 'background-color: aqua'.
Post a Comment
Read more

Bug with '</style>' inside a comment in a stylesheet

Image
 If I have '</style>' inside a comment in a stylesheet then Chrome thinks I am ending the styleheet. I put a commented out SVG in a stylesheet above where the SVG was encoded as a data URL . The SVG has a stylesheet within it However, another time, I had an extra '</head>' inside the 'head' tag and nothing happened.
Post a Comment
Read more

Setting opacity flattens preserve-3d in CSS

Image
 Fading in and out an animation by setting the overall opacity flattens the 3D effects. I am adapting an animation of going through a star field. The stars move forwards with 'translateZ'. A 'transform-style' of 'preserve-3d' is set. I added a 'keyframe' to the outer 'stage' changing the opacity from zero to one at the start, and one to zero at the end. But this changes the 'preserve-3d' in the children to 'flat' and the stars no longer move forwards. I got around the problem by instead setting the opacity on each star.
Post a Comment
Read more