[jw14]

Broken HTML+CSS in Safari? Examples?

I started using Safari as my daily driver because I use all apple devices and I like extending my battery life. Before deciding that, I did stints with Firefox and Brave, both of whom had poor sync'ing.

I can't remember the last time a site had broken HTML/CSS with Safari. My impression is the desire to have good mobile support keeps Safari support alive.

I think I encountered more broken CSS when I was using Firefox.

[rikroots]

When 3d rotating absolutely positioned elements that lie over each other, Chrome/Firefox/IE will display elements in their entirety on top of each other. Safari gets them to intersect with each other in weird-yet-mysterious ways that I've never been able to fathom[1].

If Safari recognises and/or honours the backfaceVisibility CSS property, then I've yet to implement it correctly on a web page[2].

Safari doesn't allow SVG filters to be applied to <canvas> elements[3]. Applying SVG filters to other elements is (I think) fine.

Talking about Safari and the <canvas> element, Safari will show an italicised text (ctx.font = "italic 12px Arial, sans-serif") to be stamped onto the canvas, but emboldened text (ctx.font = "bold 12px Arial, sans-serif") displays as normal, non-bold text. If you want bold text to show in a canvas element on Safari, you need to use a specifically emboldened font.[4]

... the list could go on (and on) ...

Examples

[1] - https://scrawl-v8.rikweb.org.uk/demo/dom-002.html

[2] - https://scrawl-v8.rikweb.org.uk/demo/dom-008.html

[3] - https://scrawl-v8.rikweb.org.uk/demo/filters-501.html

[4] - https://scrawl-v8.rikweb.org.uk/demo/canvas-016.html

[kouteiheika]

> Broken HTML+CSS in Safari? Examples?

I didn't mean that as "broken in the wild". I meant as "broken when I'm actually developing a website".

> I can't remember the last time a site had broken HTML/CSS with Safari. My impression is the desire to have good mobile support keeps Safari support alive. I think I encountered more broken CSS when I was using Firefox.

You're not seeing broken websites on Safari because everyone's forced to test (and fix!) their websites for Safari due to its market share.

On the other hand Firefox's market share is relatively low, and dwindling day-by-day, so there's less incentive for everyone to actually test and fix Firefox-only issues.

That said, I use Firefox as my main web browser, and personally I find it very rare for something to be broken under it, even when it's not officially supported. It probably highly depends on which exact sites you visit though.

[dylan604]

I have <div> elements with background-image assigned via CSS. Those divs require different CSS settings to get the height to layout correctly that FF/Chrome do not need.

Those same divs have border-radius applied, and are nested in another div with overflow:hidden. In FF/Chrome, the image scales as one would expect. In desktop Safari, during the CSS transition, the border radius of the overflowing element goes away and the element with the scale suddenly has square corners outside of the overflow. Once the transition ends, the corners disappear again.

This is on the Safari Technology Preview version

[paavohtl]

Here's one I encountered while developing: Safari doesn't handle linear-gradient with transparency like all other browsers: https://stackoverflow.com/questions/38391457/linear-gradient...

[Dah00n]

I think you are missing the point. The reason you don't see broken sites is because developers take extra time making sites work in Safari. They shouldn't have to.

>My impression is the desire to have good mobile support keeps Safari support alive.

I would very much argue the opposite. A good browser in iOS is directly against what Apple want (people in the app store, not in browsers). Safari is at best the absolute bare minimum a company like Apple can get away with and not a line of code more. Having just redesigned our business site I have just finished fixing the site to be the same in Safari as in the other browsers. I was forced to do this extra work to not exclude Apple customers but if I could have left it as is I wouldn't have wasted my time.

[jw14]

That's exactly what I meant. You were forced to do extra work to support mobile Safari or else exclude Apple customers. That decision is made over and over again by teams everywhere and Desktop Safari reaps that benefits.

The technologies I want never actually "win". I always have to choose the one that I either hate the least or has some other compelling benefit. The latter is the reason why I'm using Safari.

I'd rather Safari come around (or be abandoned), but pressuring Apple this way is not very effective. How long did they hang on to those stupid butterfly keyboards?

[Spivak]

I always think this is odd. If Safari is as dire as people say then why not just develop in Safari first? If your site works there then it’ll just work in Chrome/Firefox/Edge right?

[realusername]

There's the scroll background jank due to their scroll snapping model (you can scroll below a full screen div which should be impossible), the various zIndex jank, round corners for video, the SVG background issues (and SVG in general are buggy), the input autocomplete issues with their half-broken password manager... And that's all present on the latest iOS.

Recently they also broke localStorage & indexDB which are core features of the web (sill broken on the latest stable)

[wbobeirne]

I'm constantly having to add `translateZ(0)` to elements to get them to handle z-indexing or overflow: hidden correctly in Safari.

[mmis1000]

Safari didn't repaint scroll-attached linear gradient background on container content change (thus resized). If you don't also recreate the container. Your background is going to be screwed.