view transition makes screen flash

 One of my 'view transitions' sometimes made the screen flash.


I fixed this by setting 'animation-fill-mode' to 'both'.


One of my normal CSS animation might also have had this problem.


In general, I tend to put 'both' at the end of all my CSS 'animation' settings values.


At first I thought the flashes were happening because I am changing 'display' values to hide and show part of the page. Adding and removing HTML elements seems to be better.


Also I thought the flashes might be because I put 'view transition's around the start and end of a game, where a lot of changes are made to the page.  Maybe I should have kept the 'view transition' simpler.


There is a good article about this at:


  'piccalil.li/blog/

    why-are-my-view-transitions-blinking/'


The 'piccalil.li' site has some nice articles.





Comments

Post a Comment

Popular posts from this blog

Giving PWA icons transparent backgrounds

Image
 I changed some of my icons to have transparent backgrounds. These were the icons mentioned in the 'manifest' files of my Progressive Web Apps (PWA). I had given the icons white backgrounds to make them clearer as recommended by the PWA tutorial on Google's 'web.dev'. But these looked strange next to other icons on a Windows desktop. I made all my web pages PWA's by adding a 'manifest' file and starting a 'do-nothing' service worker. Chrome warns that loading these service workers slows things down. There are more tips at: bbingo.xyz/techtips/
Read more

RCS 'identification marker' comes in useful

Image
 I forgot which version of my JavaScript game I 'minimised' to produce the latest version. Luckily I had put an RCS 'identification marker' in an HTML comment at the start of the code. I had used the '$Revision$' marker. RCS is the free source control system that came with my old Linux system. There are more tips at:  bbingo.xyz/techtips/
Read more

Marking up code examples

Image
 I now put code examples inside a '<pre><code>' block I was using '&nbsp;' to indent lines. I set the '<code>' to 'display:block' so I can indent it with 'margin-left'. I start the example code immediately after the '<code>' tag to avoid an extra newline. I put everything in a 'div' with contenteditable="true" and  spellcheck="false" to allow 'copy and pasting' and to remove any red 'spell-check' wavy line. I give the 'div' 'max-width:100%' and 'overflow:auto' to stop scrollbars appearing in the browser's outer window There are more tips at: [bbingo.xyz/t](http://bbingo.xyz/t) There are more tips at:  bbingo.xyz/techtips/
Read more