-
Notifications
You must be signed in to change notification settings - Fork 111
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Work on table padding issue #95 #104
Conversation
Changed `getDefaultStyle` to create the element in the sandbox so it is pure (not tainted by CSS / ShadowDOM in the main document). Never clone SCRIPT elements (that's just asking for trouble). Removed `imagediff` package as it's not useful anymore.
@meche-gh can you see if this is makes sense to you? I THINK the problem is that we're creating the element for the This means that global styles that are applied to the tags like a css rule Rather, I think should be creating the element against the |
Sounds good to me. I noticed that the iframe getComputedStyle is a little slower (i.e. forcing a layout recompute within the iframe) - if that's a needed investment then this is the way |
Much playing around later, it's not possible to fix because something is keeping the I've verified this by adding to the original fiddle leveraging the ability to insert the cloned node into the existing page and you can see that it did NOT inline the padding. See https://jsfiddle.net/Lrgkwt5m/117/ or https://jsfiddle.net/Lrgkwt5m/119/ with this current source loaded instead Note that setting the |
The allows inspecting the properties of the clone.
Removed the setting of the `top` and `left` Set the `width` and `height` on the `foreignObject` element to the target size. Removed setting of `width` and `height` on the `svg` element.
Falls back to the old `scrollWidth`/`scrollHeight` logic if the `width` and `height` aren't set in `px`.
Pushed the final state of the v2 based code cleanup. Still doesn't fix the original bug (because I think it's a browser issue), but this code is cleaner and less likely to break. |
tagNameDefaultStyles[tagName] = defaultStyle; | ||
return defaultStyle; | ||
} | ||
|
||
function removeSandbox() { | ||
if (!sandbox) { | ||
return; | ||
if (sandbox) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In an earlier commit of this branch, I accidentally left the !
on this line. The net effect is that we never dropped the sandbox. Sorry.
@meche-gh feel free to make any comments before I merge this tomorrow. |
src/dom-to-image-more.js
Outdated
}) | ||
.then(function (foreignObject) { | ||
return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">${foreignObject}</svg>`; | ||
return `<svg xmlns="http://www.w3.org/2000/svg">${foreignObject}</svg>`; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I personally think we should set a viewport here
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Or we could do both! whatwg/html#3510 (comment) - seems like SVGs just need both for good cross-browser compat..
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
viewBox
is problematic because those values are floats, not integers. so there's a great deal of vagueness about the whole thing. Additionally BIMI icons forbid them (for good reason) so I'm leaning away from this. We can ALREADY force the width and height in the call options
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This lib would be generating SVGs without a bounding box. I consider this to be "canvas mode" - it's an image but without any notion of natural dimensions. Less useful and likely a major change in semver.
It's more convenient for devs to compute the natural dimension matching the original element plus its border. width="${width}" height="${height}"
is valuable imho
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've restore the width and height on the SVG image.
Cool, I'll revert that part.
|
Had a thought last night at the hockey game (the Blues were being terrible in the third). What if the issue is that at the time the styles are being copied over, the destination TH/TD has all the default properties so we don't mechanistically set the padding. Then later in the process we set the |
The only way to bypass the Chromium issue, and also support the default styling on descendants of We would iterate upwards on the DOM tree and get all the parent tag names going up to Merging this PR through is fine but I'd rather just let the bug be fixed and take a short break from CSSOM |
This sounds like an excellent path forward... I'm going to merge where we are to get back to sanity on the other PRs. Issue #106 capture the remaining issue and expected solution. |
Never clone SCRIPT tags Better table padding #104 Remove mozImageSmoothing #125 Defer image resolution for Firefox tsayen#214 Ignore failure.html for testing.
TARGETS
master
for the v2-release-chainChanged
getDefaultStyle
to create the element in the sandbox so it is pure (not tainted by CSS / ShadowDOM in the main document).Never clone SCRIPT elements (that's just asking for trouble).
Removed
imagediff
package as it's not useful anymore.