Safari mobile handling positioning differently

Hi all

I have a strange issue with a site I am developing. I positioned an element using relative positioning and top: 0px and it looked as expected on all the chrome developer tool emulators on my desktop, and on my android phone in chrome.

However in safari mobile browsers the element was positioned differently and acted as if the ‘top’ of the screen was in a different place with the element appearing half off the top of the viewport.

I thought that chrome and safari used the same engine?

I will try some positioning with percentages rather than pixels to see if it is a screen resolution issue.

However does anyone have any known reasons why safari may handle this differently? Searching hasn’t given me anything helpful yet.

The site is live so I can’t show you the code but will set up a hidden page tonight so I can work on just that and test on a live browser rather than emulators.

Many thanks,

Hi Matt, it’s hard to say without having somewhere to look at. Potentially this is due to a parent container div that also needs an explicit positioning… but this is a wild wild guess.

I think Safari uses Webkit whereas Chrome uses Blink… that’s probably why the different results…

Good luck and hopefully you can send over something more for us to work with.

1 Like

Thanks Andres - gives me somewhere to start looking! I will try again tonight.



1 Like

Then you did nothing as top:0 is the default . The element would not have been moved at all and would look the same everywhere. Relative positioning should not be used to move structural stuff around anyway as it does not move things physically only visually. It is used for more subtle overlapping effects instead.

If you have moved many things using relative positioning then that is likely the problem because nothing will appear to be where it should be and there will be various gaps in the page.

Perhaps you meant absolute positioning but again all browsers will treat that exactly the same if you have implemented it correctly. Chrome and Safari essentially use webkit but chrome uses a fork of webkit called blink which has some differences although none of which will cause your problem.

I can guarantee that the issue will be with your coding rather than any specific browser differences and messing around with percentages isn’t likely to yield any positive results (why should it). (Positioning with percentages sounds a very doubtful approach to me unless its something in a very controlled situation).

Basically you need to find the error in the logic of your code.

What is the current stacking context for the positioned element. Have you taken account of default margins/padding and cleared floats correctly. Is the code valid have you run it through the validator.

Are you trying to move something based on the expected height of something else.

Just to re-iterate absolute and relative positioning work in exactly the same way in all modern browsers (excluding obvious bugs) so it is likely something that you have set up wrong or incorrectly along the way and confused the browser.

Without a demo or test then its hard to give specific advice but I can tell you that the differences that you mention can usually be solved in seconds with access to the page in question. If you can’t supply a url or a demo of the problem then it will be hard to give specific advice. Perhaps you can post the code for your positioned elements and structure so we can get a grasp of what you are doing?

Having said all that then yes browsers do have bugs and indeed you may have tripped one but 9 times out of 10 it will be the author at fault rather than the browser:)

1 Like

Thanks Paul

totally agree it’s likely to be the my/the css :slight_smile:

I’m working on a pretty heavy template which I didn’t write initially which doesn’t help…

In my haste I forgot to mention - at one point I changed the top positioning to top: -15px which moved it to the correct place on one browser but again it was in a different location in the other. The two browsers seem to be rendering the top of the page in a different place if that makes sense.

I know it’s impossible to diagnose this stuff blind so I will get a demo hidden page set up and share it here for comment and to learn where I’ve gone wrong.

Appreciate you taking the time to respond



Yes but is that absolutely positioned or relatively positioned? If it is relative then where it appears will differ depending on where it happens to be in the flow which may be at a different position depending on a number of factors including the width of the viewport if content has wrapped or changed. Don’t use relative positioning at all for structural layout.

The top position may be different depending on things like default margin/padding on elements which does differ between browsers and if you haven’t reset then to a standard then there will be differences. Not to mention margin-collapse which can also trip up positioning if not accounted for.

Sometimes it can be awkward to spot the obvious when you work closely with something :slight_smile: (and sometimes (not that often luckily) browsers are just wrong).

Thanks again Paul.

I’m away from that project until this evening but for some context so you can see what I am talking about!

Ignoring the pro’s and con’s of supplied templates - it uses this one

The header logo is hidden for mobile devices (see screen shot of google dev tools where I have unhidden it) - I am trying to make the logo visible and show it centered in the header alongside the hamburger menu by editing the template css.

I could add different html to the template but wanted to try this way first.



Ahh it’s parent (rd-navbar-panel) has a fixed position so could it be related to that?

Sorry for ongoing updates - these things tend to bug me for a solution until they are done…

I think another solution may be to add the logo as a background image to the parent

for the mobile screen resolution.

Thanks for your input so far


You could just alter the media query to make it visible at smaller widths.


This is the code that shows the logo at 480px and greater widths.

@media (min-width: 480px) {
.rd-navbar-minimal.rd-navbar-fixed .rd-navbar-brand {
    display: block;

There are other rules that go with that so you will need to dig into the code to find the positional changes and width changes etc.

Hi Paul - thanks - that is exactly what I did but somewhere along the way I did something wrong to lead to the different placement in safari… I’ve sorted it another way now but will try and work out why the first attempt caused me that issue. Cheers


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