Hype stretching in MS Edge

1

This infographic works fine in all browsers except MS Edge where it’s squashed horizontally. Here’s how it appears in Edge:

And in other browsers, Mac & Windows (Chrome)
http://rezolve.4pixels.com/banks-and-telcos/about-us/index.php

2

I wasn’t able to reproduce this; what version of Edge/Windows are you using? I’d also be curious what your screen/resolution settings are.

I can take a guess though - it appears that you are using an SVG for that image. SVGs generally always preserve their proportions no matter what its container element size is. Your element size is not of the same proportions as what the SVG defines as its dimensions, so it looks like Edge is stretching to fit the element size.

My recommendation would be to redo the sizing on the element via:

  1. Select the illust element
  2. In the Metrics Inspector, hit Original Size so it is set to 782x424
  3. Check Constrain Proportions
  4. Resize the element back to what you wanted it to be; now the element size should be matching the proportions of the SVG

Does that work?

3

Hi Jonathon

Windows 10, with Edge 20 but running under emulation on my Mac through Parallels. Screen res is the 5K screen and it is an SVG.

I tried re-setting the size down to it’s original 728x424, making sure constrain proportion was clicked and then re-sized that element back up, but didn’t make any difference.

It’s definitely that background svg that’s the issue as you can see that the little yellow circles (No’s) aren’t distorted and if you drag the window in on PC/Edge and another version kicks in at the breakpoint, it’s background SVG is fine with no distortion.

Maybe I’ll just convert the background to a PNG.

Andy

4

This is looking better now (Testing on Edge 15 and Windows 10). Is this all set?

5

Thanks Daniel
Still looks the same to me, so now I’m guessing it could be an issue with the Windows/Edge emulation. All I can do is rope in some more users to test the page on actual PC’s, though I may drop the SVG and replace with the PNG just to be sure.
Andy

6

Usually with mine either they are stretched, reduced and in worst cases not displayed

7

I’ve just swapped out the SVG for PNG. I think I’ll stick with that in future just to be safe.

8

I used Browserstack, but I don't see why Parallels would be different.

9

SVGs do have a preserveAspectRatio option; I wonder if modifying this setting would help.

10

Thanks Jonathon, I’ll check in illustrator and do a test, but for now I’ve dropped the svg in favour of png.
Andy