Search code examples
cssscalemicrosoft-edgecss-transforms

Transform scale css working different on Chrome and Microsoft Edge When Printing

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.

Solution

  • 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.