Skip to content
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

Fix incorrect SVG scaling on Chrome #15

Merged
merged 2 commits into from
Sep 11, 2018
Merged

Conversation

yhatt
Copy link
Member

@yhatt yhatt commented Sep 11, 2018

The slide-deck outputted with bare template would not scaled-down correctly if you are opening it in Mac's Chrome. This problem had been a headache continued from marp-team/marpit#35 over 3 months.

We found a bit hacky workaround that use transform style. This PR would apply transform: translateZ(0); to SVG element of each template.

Before After
before after

APPENDIX: It seems to be caused by the layout engine. Chrome has other problems that may be resolved by very similar workaround, e.g. writing-mode (reproduced on Windows).

@yhatt yhatt merged commit eb503d7 into master Sep 11, 2018
@yhatt yhatt deleted the fix-chrome-incorrect-rendering branch September 11, 2018 10:53
@yhatt
Copy link
Member Author

yhatt commented Oct 26, 2018

UPDATE: It seems that this issue will be fixed if Chrome instance is executed with --enable-blink-gen-property-trees option (#33). translateZ hack might still cause the glitch at remaining space in scaled slide.

We would remove these hacks if Chrome became to generate property trees by default. Until then we have to choice between to allow glitch on Chrome or to force enabling Chrome option.

Marp CLI should select the former because the HTML output cannot select environment of browser.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant