Safari - possible flexbox issue

Report · Mar 13, 2017

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!

Report · Mar 13, 2017

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.

Report · Mar 13, 2017

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.

Report · Mar 13, 2017

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

Report · Mar 13, 2017

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.

Report · Mar 13, 2017

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.

Report · Mar 13, 2017

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.

Report · Mar 13, 2017

Safari v8 screen shots:

Report · Mar 13, 2017

Can you highlight the containers in the safari debugger?

If so can you see what is happening with the footer, and the rules being applied to the svg in the header, (L/H side) that is being cut-off?

Report · Mar 13, 2017

pziecina wrote
Can you highlight the containers in the safari debugger?
and the rules being applied to the svg in the header, (L/H side) that is being cut-off?

That is just the menu, which is supposed to be horizontal, sitting over the smaller of the 2 images.

Report · Mar 13, 2017

Just as an observation -

I tried pasting the code in Dw 2017, and then working on it. Dw kept freezing on me, now I know why all those complaints are coming.

Preran

It may be worth asking the Dw team to copy the code for the page into Dw 2017, to see the problems when users are trying to edit code with a lot of svg included.

Report · Mar 15, 2017

Hey Paula,

Sorry for being late to this post. I saw the notification, but just got late attending to it.

I will bring this post to the attention of the product team to see if they can investigate this issue.

Thanks,

Preran

Report · Mar 13, 2017

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.

Report · Mar 13, 2017

Rob,

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

Report · Mar 13, 2017

Comment out the footer wrapper.

Does this fix any of the other problems?

Report · Mar 13, 2017

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. . .

Report · Mar 13, 2017

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.

Report · Mar 13, 2017

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.

Report · Mar 13, 2017

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

Report · Mar 13, 2017

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.

Report · Mar 13, 2017

Thanks Rob, it's not how it is generated, it is the fact that Dw 2017 keeps freezing with it, which should not happen. After all it is only code, and no code editor should freeze no matter what.

I would not think it so bad, if it was a file size that was large MB's but it isn't.

Report · Mar 13, 2017

I have determined that disabling the footer block makes the problem go away. That doesn't completely rule out the SVG implication as it may be that Safari can't render the material low on the page due to the weight of the SVG.

Anyway, I can't eliminate footers from websites, but I know where to focus my attention.

I have been checking Safari using the saucelabs.com virtual browser, but it has not been rendering Safari 10 the same way as an actual computer using Safari 10. I ended up asking a client to check on his MAC. And my ipad doesn't render it the same either.

Report · Mar 13, 2017

At least you now know where the problem is. The problem for me is that I cannot actually see the problem, or debug it.

I do have an iPad, but as I cannot connect it to the Safari debugger, so I have no idea what is happening in Safari, (it does render on my iPad, but I only see the footer problem).

Report · Mar 14, 2017

pziecina wrote
At least you now know where the problem is. The problem for me is that I cannot actually see the problem, or debug it.
I do have an iPad, but as I cannot connect it to the Safari debugger, so I have no idea what is happening in Safari, (it does render on my iPad, but I only see the footer problem).

The problem as I see it is Safari, period. Whilst someone on v10 might be seeing it correctly someone on v8 or v9 will be seeing something completely different. There is no possibilty to tell that client to update to the latest version unless they have the latest OS. Its not like oh well if you update your browser to the lastest version the problem will go away, its like oh well if you update your OS to the latest version the problem will go away, serious flaw in Apples thinking not to make a browser which is at least compatible with a few versions back of their OS. They have bought it upon themselves by releasing multiple OS's in a short period of time and distabilised the market. Once IE was a massive problem now its Safari. How can any developer even contemplate using newer features like grids when there must be millons of uses like myself never going to update their OS until they buy a new computer whose life expectancy could be 4-6 years plus the millions of old/second hand ipads etc. Safari is the new version of Nutscape Navigator, at least that wasnt OS dependent but it was a pile of wood chippings.

Report · Mar 14, 2017

The problem isn't can one use newer features with Safari, it is one of testing in Safari.

Even though like Rob, i think that svg's are part of the problem with his pages, the inability to test in Safari on windows makes it an impossible browser to develop for. If it was not for iOS devices i think many developers would ignore Safari completely.