search

tsayen / dom-to-image

Generates an image from a DOM node using HTML5 canvas
Other
10.32k stars 1.68k forks source link

margin css property bug with getComputedStyle in FireFox #136

Open poacher2k opened 7 years ago

poacher2k commented 7 years ago

Use case: description, code

There's a 10 year old bug in FireFox with getComputedStyle and the margin property, where auto is computed to 0px instead of its actual value.

This obviously isn't dom-to-images fault (awesome library btw!), but I was wondering if there is any way we can detect that the margin is auto, and if so, use for example offsetLeft, or a custom css property like --margin if present, or anything like that. jsbin ^ try this bin in Chrome and FireFox to see the difference. or even just inspect it with dev tools in FireFox and look at the box model / computed values, where the box model for some reason displays the correct value, while the computed value in the list displays '0px': image

Expected behavior

the actual margin of the element should appear

Actual behavior (stack traces, console logs etc)

auto margin evaluates to '0px'

Library version

2.6

Browsers

poacher2k commented 7 years ago

I discovered that if you use getComputedStyle of an element that is not in the DOM, the auto value remains in FireFox. With this, I managed to solve the issue by checking for this value, and if it is auto, use getBoundingClientRect to compute the margins instead.