Safari details-summary problem

This works on “every browser” (…I have tested :-)) on Mac, PC and Android but not Safari. My intention is to use a minimum of Javascript. Hence I try to use “details/summary”, but this fails on The New Internet Explorer (Safari)

My simple question is if there is a work around that lines the text correct on Safari?

My wild guess is that this flex fails on Safari.

summary {
  display: flex; <------ Does not work on Safari?
  height: 42px;
  width: 200px;
  list-style-type: none;
  outline: none;
}

Yes, I managed to fix it on Safari, but then it break all other browsers.

image

So, how do I fix it for other browsers? :slight_smile:

Finally I found a solution.

summary span{  <----added <span> tag
  display: flex;
  height: 42px;
  width: 200px;
  list-style-type: none; <---added this to make work on other browsers
  outline: none;
}

Unfortunately your code is invalid so I wouldn’t rely on any behaviours until you fix the html :slight_smile:

In a ul all content must be inside a li element.

Run your code through the html validator if you don’t know why it is wrong :slight_smile:

(It probably makes no difference to your problem but I don;t have Safari to test while I’m away.)

Is it no longer needed to have a body tag in a html file?

I’m not familiar with JSFiddle, but in Codepen you don’t need the head section or the body or html tags.

1 Like

No need for head and body in JSFiddle. Codepen and JsFiddle are about the same. The difference is that JSFiddle tells you more what is wrong and I find it easier to format. And you have to save to refresh the fiddle. It is most a personal preference IMO.

1 Like

Looking deeper into this and there seems to be some issues with Details/Summary and Safari behaviours and others have suggested using an inner element instead. (Although it does seem to work ok on Safari IOS).

There’s a timely article here that may be of interest and has a link to display problems (Lea Verou).

When I get back from my break in a couple of weeks I’ll have to do more testing on this :slight_smile:

2 Likes