Image changes position in safari and chrome


(Lee) #1

Hi,

Happy new year!
An image in my hype file changes position when previewed in safari and chrome, any ideas on how to fix this?

image position error.zip (583.9 KB)


(Jonathan Deutsch) #2

Happy New Year!

I don’t see any differences; can you perhaps create an annotated screenshot showing the difference and list any steps to see the problem?

If it is a minute difference, you may want to check to make sure both browsers are zoomed at 100%.


(Lee) #3

sure, it’s a minute difference but it still has a visual impact when aligning text with images/nav bars etc.

here’s chrome and safari at 100%, safari seems to shift the image down a few pixels


(Jonathan Deutsch) #4

Thanks for the image. I’m guessing it has to do with your flexible layout settings in regards to different window sizes (and possibly any window zoom). If I disable flexible layout they line up pretty well:

(green is safari, black is chrome)

If your browser viewport is the same size, do you see differences?


(Lee) #5

if by browser viewport you mean browser window size then yes, the change in position is still visible when the viewport is the same size across browsers.

the above example looks great, I only seem to have the issue with safari, not chrome - even when flexible layout settings are tuned off


(Jonathan Deutsch) #6

What version of Safari are you running? Can you send a full screen screenshot? (and did you hit command-0 to make sure you are zoomed at 100%)?


(Lee) #7

Im running safari version 12.0, here’s a full screen screenshot with cmd+0 pressed, ensuring there’s no zoom


(Jonathan Deutsch) #9

Hmm… maybe we’re looking at this in reverse. The result from that screenshot seems to match what I also see in Chrome. So perhaps the Chrome window size/zoom is causing a repositioning? The document is pretty simple, so aside from the expected changes from using flexible layout (which will cause positioning to change a little), I don’t see how it could be that far off.


(Lee) #10

problem solved, the issue was being caused by line height in the text next to the logo - the text was moving, not the logo