Mac Chrome not interpreting position-relative top -px, or position:absolute top -px the same as PC Chrome

Community resources Bugs
1

Hello, hope somebody can throw some light on what’s going on here.

I’ve just spotted that in Chrome on Mac OS, this page https://loanary.webflow.io/ is treating the top heading’s alignment differently to all other browsers. In Mac Chrome the top heading sits through the curved line, it should be sitting on it as with Firefox in Mac or all browsers on Windows.

The heading is in a div which has its position controlled by position:relative and top:-60px; I’ve done a test and it seems that Mac Chrome doesn’t like the top negative px attribute, when I tested an alignment using top positive px alignment was perfect. I’ve not ever noticed this as being a problem with Mac Chrome before. Is this an issue with Webflow or is it Chrome itself?

Here’s the issue

browser-alignment-issue
browser-alignment-issue1593×918 154 KB

You can see the issue here on the homepage.
https://preview.webflow.com/preview/loanary-alignment?utm_medium=preview_link&utm_source=designer&utm_content=loanary-alignment&preview=5b5a3198e1f3b96ba4df267b48c6576c&mode=preview

2

Not sure if you were able to fix the problem (as the screenshot below is what I am seeing in Chrome on MacOS), however I’d chalk this up to differences with how each browser interprets CSS rather than an issue on Webflow’s end:

image
image954×594 41.7 KB

Note: I’m on a new MacBook Pro with Chrome’s native M1 app, but I’d be surprised if it’s rendering any differently than their x86 version.

3

Hi there,

Thanks for taking a look. Yes, I’ve manged to fix it but have had to create OS + browser specific styles to control it. I’m pretty sure it’s not Webflow either, it’s just that what I am doing is pretty basic as far as position relative or absolute goes and I’m surprised that there’s an issue.

Grant

4

Glad to hear you were able to get it figure out!

You’d be surprised at how slight differences in browser interpretation can lead to differences with fairly straightforward code. Since you’re using separate elements for the line and text, your design requires super accurate positioning to look as intended so slight adjustments based on the environment are not uncommon.

All that said, I really dig the design of the site and think the layout] flows super well as I scroll down the page—nice work :metal:

5

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