Streaming live at 10am (PST)

Extra margin in Chrome

Hi everyone,

I noticed this strange behavior between Chrome and Safari. When you have a div with set width and height, absolute and you change margin. In Safari, the div moves relatively to its original position and you can see the border in blue/red. In Chrome, this border moves the opposite direction at the same time, doubling the margin required. For example, if you add 100px margin to the top, the div will move only 50 px from its original position.

Attached are the screenshots of the same div with margin 45px. The div behind has the same size and properties as the gray one, except for the color.

In Chrome…

In Safari

Any insight would be helpful.

Thank you.

Here is my site Read-Only: Webflow - Zeit

I don’t see the blue bar using chrome but the brown bar is thinner for sure. Where you show a blue bar, mine is white.

Like you, I don’t see a reason when in Webflow.

Have you tried publishing then checking with each browser to see if the issue remains? It could be just a Webflow canvas issue.

Thanks, @JimF
Yes, I have checked how it looks published in Safari and Chrome and it looks different, just like what I see in Designer. I am surprised it’s not such a common issue people run into.

I found a workaround: using transform instead of margin.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.