Posts

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

Images for 'open graph' tags

Image
 Twitter seems to need an 800 by 800 pixel image for the image in its 'meta' open graph tags. Twitter says just to create a post and put in a link to see how the 'card' for the meta tags look. Sometimes the 'card' is shown but sometimes it is not. Twitter has an old tool to show which 'meta' tags are being used, but Twitter now says this is not always correct on all devices. At first I scaled down some old 1280 x 720 pixel screenshots to 800 x 800. But the text looks a bit tall and narrow, so I will have to take fresh screenshots that are square. Facebook seems to look for an image in the page referenced in the 'og:url' tag rather than the current page. Facebook has a tool to check which 'open graph' tags are used. I have added 'open graph' meta tags to all my pages.
Post a Comment
Read more

CSS position fixed bug

Image
A 'div' with 'position: fixed' was not visible when I forgot to give a 'top' or 'left' and other content filled the screen.  The 'div' is visible and below the other content if this content only partly fills the screen. If I say 'position: absolute' then the 'div' is at the bottom of the other content even if this content fills the screen. 
Post a Comment
Read more

URL encoding SVG

Image
 The 'encodeURI' function on my old browser does not give the right output for a data URL for a background image of an SVG. So I use the free online URL encoder at:     https://yoksel.github.io/url-encoder/ My browser's 'encodeURIComponent' function does not give the right output either. Chromes's 'encodeURIComponent' function does not give the right output either. I tried changing all double quotes in the SVG to single quotes, but this did not give the right output either
Post a Comment
Read more

setTimeout continues in hidden Chrome tab

Image
 I used 'setTimeout' to run a 20 second animation again two minutes after it first starts. But if I change tabs in Chrome after a a few seconds and come back to the original tab after a few minutes, then the first and second animations run together. It seems the hidden tab freezes but 'setTimeout' still counts down the seconds. 
Post a Comment
Read more

Bug using 'xlink:href' with SVG

Image
 I had a bug where using 'setAttributeNS' and "xlink:href" on a 'use' tag of an SVG would not override the plain 'href' set in the HTML. It seems I should always use plain 'href's as 'xlink:href' is not used now.
Post a Comment
Read more

Adding SVG icons next to buttons

Image
 Putting SVG's of animals near buttons draws the eye to the buttons. The SVG's also look nice and are fun which is OK as my main page is a game. But some SVG's do not look clear at the small size needed to sit next to a button. The idea came from GIMP where the walrus mascot appears in the icons.  Also my old KDE desktop has a green dragon sitting above the letters 'KDE'.
Post a Comment
Read more