Search code examples
iossafariinnerhtmlhtml-rendering

<br> being ignored when updating innerHTML on ios/ipados

[EDIT: Apple replied. It was caused by new permanent behaviour introduced by Safari conforming to a draft of the css spec. I figured out an easy workaround and posted it as an answer]

I recently reported to Apple that, after updating to IPADOS 17.2, Safari ignores the <br> tag when updating the innerHTML of an element.

enter image description here

jsfiddle link

Not sure if it is effecting more than just iframes, as I just discovered it, and I don't have a workaround just yet.

This is going to be annoying until Apple fixes the issue, so if anyone else has noticed this, what is your workaround?

This is strange behaviour!

Solution

  • Ok, I was able to figure out that the issue was caused by how Safari, after updating to IPADOS 17.2, was rendering <br> elements after position: absolute was applied to *

    *{position:absolute;}

    This made it so, according to Apple, Safari will conform to a recent css spec draft, where somebody didn't think through that developers need a reliable analogue to \n . According to Apple, Safari will now permanently effect <br> elements by computing them absolutely as well.

    My solution was to modify the css, by adding

    br{position:relative;}

    Worked like a charm, but, again, the line-break tag, for years in all browsers, was simply an analogue to \n , that could not -- and still cannot -- contain children, and was always meant to modify relatively, instead of being completely block-ified ; thus, the fact this has to be added is more than a bit annoying, as it will now break, or rather not add a break-line, for many older websites that used *{position:absolute;} to help designers/developers with div layering and pixel precision.