0

I am using the css rule "transform: scale()" to scale a flowchart in a website.

The problem happens in the printing result

Everything is working properly in different browsers, Chrome included, but Microsoft Edge scales the chart in a bigger size so it doesn't fit the size I need. I would like to use just one declaration for all browsers.

@media print{
    .class-to-scale{
       transform: scale(0.85)
    }
}

But in Microsoft Edge it works the same way than Chrome but just if I scale using a lower factor, 0.65 instead of 0.85.

How could I approach this problem to set a different scale for Microsoft Edge.

Thanks.

Lucidio Vacas
  • 700
  • 2
  • 8
  • 22
  • 1
    For 'normal' ```div``` it seems to be identical in both browsers when scaling down: https://jsfiddle.net/n7xfuscm/1/. To target via ```CSS``` Edge browser: https://stackoverflow.com/questions/32201586/how-to-identify-microsoft-edge-browser-via-css – prettyInPink May 18 '21 at 14:47
  • 1
    i check with different scale factor, in chrome and Edge div transformed in same size – Greg-- May 18 '21 at 14:51
  • Thank you both. I forgot to say that it happens in the printing result. I updated the question. I checked that in the browser the scale is the same, but when I go print the page, the result is different. – Lucidio Vacas May 18 '21 at 14:58

1 Answers1

0

Just in case it happens to someone, the problem was that I hadn't set the @page size, so I imagine that every browser was taking a different one by default.

I added the next line to my css

@page {size: portrait}

and now the result of the printing is exactly the same.

Lucidio Vacas
  • 700
  • 2
  • 8
  • 22