Legend

Question

Safari - possible flexbox issue

Forum|Forum|8 years ago
March 13, 2017
6 replies
5094 views

My website structure has two problems with Safari.

The final element on the page (logo) may appear superimposed higher up over the page.
Content in the main content area may not appear at all.

I've been knocking my head against this and can't identify the problem(s). No problem with other browsers.

yogasite.net

I appreciate any efforts to help identify the issue. Thanks!

This topic has been closed for replies.

pziecina

Legend

https://forums.adobe.com/people/Rob+Hecker2 wrote
The final element on the page (logo) may appear superimposed higher up over the page.

The reason I suggest commenting out the footer, (as it is appearing in the wrong position) is that if a float is used on a flexbox child container, the float should be ignored, but if a float is used and rendered by a browser it can sometimes take the floated item out of the flex content flow.

It's not a bug with the browser, but with the css, and sometimes it happens if js is involved.

Rob Hecker2Author

Legend

if a float is used on a flexbox child container, the float should be ignored

I'd be happy if that was the issue. I will check. I can also quickly convert any floats to flex.

Rob Hecker2Author

Legend

Rob, I hope you don't mind me suggesting that Preran use the page to see the svg problem in Dw?

Rob, I hope you don't mind me suggesting that Preran use the page to see the svg problem in Dw?

Not at all. It isn't how I see and work with the code though because the SVG is all in include files and everything is generated from PHP. Even the CSS is generated from PHP on the fly.

pziecina

Legend

Comment out the footer wrapper.

Does this fix any of the other problems?

Rob Hecker2Author

Legend

Thanks for all the feedback while I was away on a fieldtrip to the public library where they have Macintosh computers the public can use.

why are you setting the flex-direction to column?

The outermost box, the body, is set to column with width of 100%. It contains a series of flexbox layers. Every layer has a screen-width wrapper box containing a page-width inner box. Within the inner boxes the direction is mostly row.

Are you floating anything in the layout , as in the footer I am seeing a 'clear' statement?

Old habits. . .I may still have some floats in use, though I've been trying to go 100% flexbox.

Is Safari regarded as a serious browser any longer?

It's a serious browser when someone who writes me checks uses it.

This is kind of hard to research because I have to make changes to the production system in order to view the results on my ipad. My ipad was not always giving the same result as Safari on desktop, same version.

There is a lot of SVG code, so I am going to disable all of it and see what happens. Then work from there. . .

pziecina

Legend

Rob,

Are you floating anything in the layout , as in the footer I am seeing a 'clear' statement?

pziecina

Legend

Just a thought -

If you set the default flex size to auto, it may possibly help to see if the height/width bug with svg's is causing the problem, as the flex container should then grow accordingly.

O

osgood_

Legend

https://forums.adobe.com/people/Rob+Hecker2 wrote
My website structure has two problems with Safari.
The final element on the page (logo) may appear superimposed higher up over the page.
Content in the main content area may not appear at all.
I've been knocking my head against this and can't identify the problem(s). No problem with other browsers.
yogasite.net
I appreciate any efforts to help identify the issue. Thanks!

Ding! looks a right old mess in Safari v8

That image of the person doing a sort of semi hand stand is about 3x the size of what it is when viewed in Firefox, just about every thing else is whacked as well. The searchbox is stuck up in the left corner of the screen when it should be in the right corner.

Looks like your using Grids not Flexbox lol

Is Safari regarded as a serious browser any longer? When Apple bring out a new operating system, practically every year, you either have to update to the new OS or stick with a backwards version of Safari because any new realease of Safari is not compatible with an older OS.................Apple have got this compeletly wrong, a bunch of dumb animals. Yosemite is not that old and yet the new releases of Safari will not run on it..........WTF!

Safari is holding everyting back much like IE did in the past.

pziecina

Legend

Apple I think are now more into mobile devices, and desktops are just for those who don't mind paying a lot of money out

Rob, I have found a bug reported that sometimes in Safari V9 the svg is cached and not rendered, also another bug to do with safari V8/9 not getting the height/width correct of svg's.

For the second of them, the solution was to insert the svg as an image, and the first that it was fixed, but it did not say in which version.

O

osgood_

Legend

pziecina wrote
Apple I think are now more into mobile devices, and desktops are just for those who don't mind paying a lot of money out

To be honest Safari is a complete joke of a browser now that it is OS dependent. Like Opera, is that still going and who uses that piece of dust? Apple have lost the plot in regards to browsers and would be well advised to get out of the Browser sector rather than try peddling what is a pile of horse dung.

pziecina

Legend

I don't think it is flexbox but the use of svg, I don't use a Mac so cannot check, but -

Safari did used to have problems with inline svg usage, (using <use>) and I don't know if or when this bug was fixed.

Rob Hecker2Author

Legend

Thanks Paula. There are a number of loaded SVG elements with <use> (though my site doesn't use many of them). This is one thing I have not investigated.

pziecina

Legend

Just a thought Rob, but why are you setting the flex-direction to column?

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded