Safari only issue

[kamm]

Hi folks, I’d be really grateful if someone with a Mac/Safari could help me debug this issue. I don’t have a Mac and have tried debugging it using Lambda test, but it runs so slow that I’m not getting anywhere.

All my tests on Windows browsers (Chrome / FF / Opera / Edge) look like this:

…but on Safari the left Previous Page icon/link and the Back to search results link aren’t visible - it looks like this:

In order to replicate this you’ll need to first go here:
https://www.spanishpropertychoice.com/coastal-properties
…then click on any property on the results page.

[PaulOB]

Hi,

It looks like Safari doesn’t like the display:table-row on main.content page_detail.

A quick fix would be to set it to display:block instead.

main.content page_detail{display:block}

It may be that you are using display:table-row for some sort of sticky footer (although there are better ways with flex these days) so maybe getting rid of the display:table-row is not an option. Another fix would be to float the main element as its the negative bottom margin on the header that is making the items disappear.

Try this:

main.content page_detail{
float:left;
width:100%;
clear:both;
}

That will stop the negative margin reaching inside the pagination and dragging some elements out.

[kamm]

Hi Paul,

It’s been many a year since I’ve posted on this site, but I remember way back in the early days you were around and several times offered me valuable advice. Nowadays I can usually sort things out myself but this one had me stumped. Once again you’ve come to my aid and it’s much appreciated. It’s good to see you still here and posting actively.

I went with the second option (it seems to have done the trick) as the first one caused issues with the background further down the page…

Thanks again.

[PaulOB]

@kamm

I went with the second option (it seems to have done the trick)

Yes the problem is the negative margins in the header dragging some elements from underneath. However the main crux of the problem is that the display:table-row on the header has been changed to display:grid which will break the sticky footer routine and ‘may’ cause some other problems not evident on a full screen.

The display:grid should have been applied to a wrapper inside the header and therefore leave the main structure alone. I still think the negative margins inside the header would have had an impact in Safari and indeed you probably don’t need negative margins when using grid as you can use the grid instead and create overlaps through the grid layout

A full solution would be to use the flexbox sticky footer and change the wrapper to display:flex; and get rid of the display:table-row on main and footer (you already changed the header to display:grid anyway which should work with the new code).

.wrapper{
display:flex;
flex-direction:column;
min-height:100vh;
height:auto;
}
main,footer{height:auto;display:block}
main{flex:1 0 0;}

Then you can get rid of that float rule I just gave you and back to an even keel

@kamm

Once again you’ve come to my aid and it’s much appreciated. It’s good to see you still here and posting actively.

Thanks, yes I’m still here. They can’t seem to get rid of me