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.
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.
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:)
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.
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 (and sometimes (not that often luckily) browsers are just wrong).
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.
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
