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

[gatsby-plugin-sharp] Traced SVG scaling issue in Internet Explorer #22169

Closed
flogy opened this issue Mar 11, 2020 · 2 comments · Fixed by #22358
Closed

[gatsby-plugin-sharp] Traced SVG scaling issue in Internet Explorer #22169

flogy opened this issue Mar 11, 2020 · 2 comments · Fixed by #22358
Labels
status: confirmed Issue with steps to reproduce the bug that’s been verified by at least one reviewer. type: bug An issue or pull request relating to a bug in Gatsby

Comments

@flogy
Copy link
Contributor

flogy commented Mar 11, 2020

Description

The Traced SVG placeholders for my images are not scaling in alignment to the actual images in Internet Explorer.

Steps to reproduce

  1. Open this demo website in Internet Explorer 11: https://using-gatsby-image.gatsbyjs.org/traced-svg/
  2. Hover some of the images to see the misaligned Traced SVGs.
  3. Optionally scale the window size (so the images scale as well) and hover the images again to see that it is actually some kind of a scaling problem.
  4. Open the same website in another browser and repeat those steps to see that it works fine.

Expected result

Traced SVG placeholders should be aligned with the actual images in Internet Explorer, like it is in other browsers. It should look like this:

fixed

Actual result

In most cases the Traced SVG placeholder is not aligned with the actual image in Internet Explorer (tested with IE 11). It looks like this:

original

Environment

  System:
    OS: Windows 10 10.0.18362
    CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
  Binaries:
    Node: 10.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.16.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.13.7 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.5.1 - C:\Program Files\Python35\python.EXE
  Browsers:
    Edge: 44.18362.449.0
  npmPackages:
    gatsby: ^2.19.7 => 2.19.7 
    gatsby-image: ^2.2.39 => 2.2.39 
    gatsby-mdx-tts: 0.0.2 => 0.0.2 
    gatsby-plugin-emotion: ^4.1.23 => 4.1.23 
    gatsby-plugin-manifest: ^2.2.39 => 2.2.39 
    gatsby-plugin-mdx: ^1.0.75 => 1.0.75 
    gatsby-plugin-offline: ^3.0.32 => 3.0.32 
    gatsby-plugin-polyfill-io: ^1.1.0 => 1.1.0 
    gatsby-plugin-prefetch-google-fonts: ^1.4.3 => 1.4.3 
    gatsby-plugin-react-helmet: ^3.1.21 => 3.1.21 
    gatsby-plugin-robots-txt: ^1.5.0 => 1.5.0 
    gatsby-plugin-sharp: ^2.4.8 => 2.4.8 
    gatsby-plugin-sitemap: ^2.2.27 => 2.2.27 
    gatsby-plugin-typescript: ^2.2.0 => 2.2.0 
    gatsby-remark-images: ^3.1.47 => 3.1.47 
    gatsby-source-filesystem: ^2.1.46 => 2.1.46 
    gatsby-transformer-sharp: ^2.3.17 => 2.3.17 

Some investigation

Possible fix

  • Re-adding the viewBox property fixes most cases in IE11 while it seems to not change any behavior in other browsers (tested in Chrome v80).
  • To prevent SVGO to remove it we could change this line of the gatsby-plugin-sharp:
    const svgo = new SVGO({ multipass: true, floatPrecision: 0 })
    to disable the removeViewBox plugin like so:
const svgo = new SVGO({ multipass: true, floatPrecision: 0, plugins: [{ removeViewBox: false }] })
  • However, this will only fix cases where the aspect ratio of the gatsby-image-wrapper is 1:1. For other cases we also need to set the preserveAspectRatio='none' to fix it. I did not check if this would have side effects. But it could be done using the SVGO addAttributesToSVGElement plugin.

Next steps

  • If you are familiar with SVGs it would be great if you could share your thoughts about my solution proposition: do you see any possible side-effects, especially by adding the preserveApectRatio property?
  • I will create a pull request for this (at least for fixing the issue for aspect ratio 1:1 images).
@flogy flogy added the type: bug An issue or pull request relating to a bug in Gatsby label Mar 11, 2020
@vladar vladar added the status: confirmed Issue with steps to reproduce the bug that’s been verified by at least one reviewer. label Mar 13, 2020
@vladar
Copy link
Contributor

vladar commented Mar 13, 2020

Thanks for the great bug report!

I think we should try your solution and see if it works for all possible cases. So feel free to submit the PR!

@flogy
Copy link
Contributor Author

flogy commented Mar 17, 2020

I think we should try your solution and see if it works for all possible cases. So feel free to submit the PR!

Thank you, the PR is now online and can be reviewed and tested. Hope this helps & happy to hear about the results :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status: confirmed Issue with steps to reproduce the bug that’s been verified by at least one reviewer. type: bug An issue or pull request relating to a bug in Gatsby
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants