Image changes position in safari and chrome

(Lee) #1


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 (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