Cornerstone breakpoints inaccurate with Safari

[spedney]

Something I think I’ve noticed but ignored for a while… When using MacOS Safari the breakpoints don’t activate at the proper values, as compared to using Chrome which seems to get it right.

So, as I’m increasing the screen size up from mobile size towards iPad size the changes should happen at 767 pixels, but it takes until about 782 px until they happen. Same goes for transitions between the other sizes. 480 doesn’t happen until 494 etc.

I’ve never messed with the settings and have 480 / 767 / 979 / 1200 which I guess is the default.

[charlie]

How are you testing that? Does this template help you figure out what’s going on? It’s a page template that outputs the current window width on the page in a text element and has various breakpoints. Only thing that comes to mind is there is some UI scaling on your devices.

http://theme.co/app/uploads/share/parameters-breakpoints.tco

[spedney]

Thanks for the response Charlie. I did some more testing today. Set up a clean user on my mac in case it was something weird in my Safari settings and got the same results.

Here’s what I get when in Cornerstone:
1200 breaks at 1215
979 breaks at 994
767 breaks at 782
480 breaks at 495
So, 15px more for each one.

That is when I have page template set at “default” (content left, sidebar right). If I choose “blank - no container, header, footer” then I get different values: 1200 and 979 are ok but 767 breaks at 782 when enlarging window and 767 when reducing. 480 breaks at 495.

All works fine in Chrome and seems ok on the front end in Safari - it’s just in the Cornerstone editor that this occurs.

Your JS code which you are using to show the window width only works in the front end - I have been using the size values at the bottom of Cornerstone to check the window size: