/    Sign up×
Community /Pin to ProfileBookmark

Flex – No Wrapping or Spacing in Safari 8

Copy linkTweet thisAlerts:
Oct 22.2017

Hi!

I don’t know anything about Flex aside from a little research I been doing on this issue or bug. On Chrome and newer versions of Safari the code is working fine but on Safari 8 (my old clunky laptop) it’s not wrapping down the next row or putting any space between the items. Here is the code below. Any obvious reason or way to fix my issue?

.home #book #book-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}

Thanks! I’m hoping to fix this issue ASAP but my developer is off until next week ?

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@jedaisoulOct 22.2017 — Hi,

I avoid vendor prefixes, preferring to wait till new facilities have been universally adopted. However, it appears that Safari 8 requires a "-webkit-" vendor prefix on flex. You seem to have omitted that from the "flow" property. So, although I haven't tested it, I guess that if you add "-webkit-flow: row wrap;" it might solve the problem.

Alternatively, you could just update your browser, and delete the pesky vendor specifics wholesale, as it appears that all the up-to-date browsers support flex without vendor prefixes! ?
Copy linkTweet thisAlerts:
@blue_visionauthorOct 22.2017 — Hi,

I avoid vendor prefixes, preferring to wait till new facilities have been universally adopted. However, it appears that Safari 8 requires a "-webkit-" vendor prefix on flex. You seem to have omitted that from the "flow" property. So, although I haven't tested it, I guess that if you add "-webkit-flow: row wrap;" it might solve the problem.

Alternatively, you could just update your browser, and delete the pesky vendor specifics wholesale, as it appears that all the up-to-date browsers support flex without vendor prefixes! ?[/QUOTE]

Sadly, that didn't work ?

I realize I can update to fix. It's just gonna bother me. I feel like visitors should at least be able to view things reasonably in the same browser I initially tried even if it is outdated. Any other ideas?
Copy linkTweet thisAlerts:
@jedaisoulOct 22.2017 — Sorry, I can't think of anything else, apart from checking the vendor specific syntax. I just copied it from the other ones, so it could be different!



By the way, before I suggested you remove the vendor specifics, I checked [b][url=https://www.w3counter.com/globalstats.php]W3C Global Volumes[/url][/b] and the only version of Safari that appeared was 10. So unless you have an over-riding reason to support an obsolete version, you really should consider removing the vendor specifics. They are just bulking up your code and making it less readable. Of course, deleting the vendor specifics, as with any code edit, could introduce a bug if you make an error. So there is an argument for leaving them alone, or, as in my case, not using them in the first place!!! ?
×

Success!

Help @blue_vision spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...