This screenshot shows an overlap of the same Rapidweaver Foundation website in Opera, Chrome, Firefox and Safari from left to right.
In Firefox and Safari the lowest part of the page is covered by the (black) footer at first opening of the browser window. Because of that the distance between the last row of pictures and the footer which I designed according to the two screens on the left appears to be reduced. Sometimes this problem disappears at reload.
Why can’t Target behave constantly in the same manner and follow my layout in Rapidweaver, i. e. not covering the lowest part of the page?
If you look at Safari, its viewport is larger because the window chrome is minimal compared to the other browsers. This made the content larger and therefore affects Target.
Actually, all the four pages show situations with slider fully scrolled down. Therefore the height of the browser windows doesn’t play any role. This is one point.
The other point is that after reload both Safari and Firefox will show the result like Opera and Chrome in the first place. This for me looks like some strange behavior.
To explain what I mean regarding Target’s behaviour in Safari, I show the footer area (Target with inserted black area and white text) A) in a wide window (Tablet mode) and B) in a narrow window (Mobile mode).
I show once the screen as it appears at first, and then the screen after reload.
As you can see in the comparisons, the distance to the lowest content is first about 70 pixels higher than after reload.
This behaviour appears only in Safari, but not in Firefox, Chrome, Opera or Edge.