I use HTML files to create images for a tile based game we play. 6 months ago I was able to create a table with collapsed borders and 0px padding, margins, and borders, … (read more)
I use HTML files to create images for a tile based game we play. 6 months ago I was able to create a table with collapsed borders and 0px padding, margins, and borders, then draw my image with 207 x 207 JPEG TDs in multiple TR rows, then place another GIF image over all the JPEGs with transparent edges. Doing this for a table that was 6 tiles (207px) wide and 4 tiles deep, at ctrl 0, displayed a Firefox combined image that was exactly 1242px x 828px that was completely visible on 24 inch 1920 x 1080 DELL monitor. This allowed me to right click an empty space on my Firefox screen and select Take Screenshot to click on the GIF overlay image and capture that image with all of the tiles that were behind its transparent edges.
For some reason, I have no idea why, my 207px by 207px tile images are now being displayed as 282px by 282px at ctrl 0, and the overall image is now too large to fit on the screen, so taking a screenshot of the proper sized image is no longer possible. For example, at ctrl- ctrl-, the tile images are 221 pixels square, which should be 1326 pixels wide for 6 tiles, but my 1242px wide GIF file displays at 1330 pixels wide, probably due to some kind of rounding error.
I was able to use about:config and change layout.css.devPixelsPerPx from -1.0 to 0.74 and it did solve the problem. But it does so with a lot of warning for changing that default value!
So my question is simple: how does Firefox, on Windows 10, determine its screen pixel to Image px relationship? I need to know what to look at for the proper way to get my px to pixel ratio back to 1 to 1.
This is what the working image looks like while designing the center scoreboard tile
and this is what the final image looks like when you take a screenshot of the image