mdn
svg.elements.text.textLength - textLength="0" has no effect in Safari / Safari iOS
Original title: svg.elements.text.lengthAdjust - <lengthAdjust doesn't work on IOS safari, Chrome, and Firefox>
What type of issue is this?
Browser bug (a bug with a feature that may impact site compatibility)
What information was incorrect, unhelpful, or incomplete?
I've sent some video to mozilla over social media
https://x.com/TheSonMorning/status/1950212124128481622
What browsers does this problem apply to, if applicable?
Chromium (Chrome, Edge 79+, Opera, Samsung Internet), Safari, Firefox
What did you expect to see?
the spacing of the letters of my text string should start squished togeather and invisible, and then after an animation, burst out of nothingness to fill the width of my svg tags; but on mobile devices, the spacing is completely ignored.
Did you test this? If so, how?
Yes. Here is my test code. It works on desktop (firefox linux); but fails on the three mentioned mobile browsers
<html>
<head>
<title>Frankie Logo</title>
<style>
.canvas-container{
background-color: transparent;
}
.stave-line{
stroke:#1e73be;
stroke-width:2;
}
.note-hidden{
opacity: 0;
}
.note-implode{
position: absolute !important;
top: 53px !important;
left: 135px !important;
transition 0.25s;
}
.note-shrink{
transform: 0.5s;
width: 0px;
height 0px;
opacity: 0;
}
.note-visible{
opacity:1;
transition: 0.60s;
}
.note1{
position: absolute;
top: 88px;
left: 14px;
}
.note2{
position: absolute;
top: 72px;
left: 45px;
}
.note3{
position: absolute;
top: 81px;
left: 77px;
}
.note4{
position: absolute;
top: 88px;
left: 108px;
}
.note5{
position: absolute;
top: 66px;
left: 135px;
}
.note6{
position: absolute;
top: 74px;
left: 165px;
}
.note7{
position: absolute;
top: 84px;
left: 196px;
}
.note8{
position: absolute;
top: 96px;
left: 227px;
}
.note9{
position: absolute;
top: 79px;
left: 256px;
}
.note10{
position: absolute;
top: 88px;
left: 285px;
}
.business-name{
transition: 1s;
x: 0;
textLength: 300;
}
</style>
<script>
async function shrinkNote(sync){
sync.classList.add("note-shrink");
}
async function implodeNote(sync){
sync.ontransitionend = async function() {
};
sync.ontransitionstart = async function(){
shrinkNote(sync);
};
sync.classList.add("note-implode");
}
async function showNote(noteID){
var sync = document.querySelectorAll(".note-hidden")[noteID];
sync.ontransitionend = async function() {
implodeNote(sync);
};
sync.ontransitionstart = async function(){
noteID++;
if(noteID < 10){
showNote(noteID);
}
};
sync.classList.add('note-visible');
}
</script>
</head>
<body onload="showNote(0)" bgcolor="grey">
<svg width="300" height="82">
<line x1="0" x2="300" y1="14.28" y2="14.25" class ="stave-line" />
<line x1="0" x2="300" y1="28.57" y2="28.57" class ="stave-line" />
<line x1="0" x2="300" y1="42.85" y2="42.85" class ="stave-line" />
<line x1="0" x2="300" y1="57.14" y2="57.14" class ="stave-line" />
<line x1="0" x2="300" y1="71.42" y2="71.42" class ="stave-line" />
<!-- <line x1="0" x2="300" y1="85.71" y2="85.71" class ="stave-line" />
<line x1="0" x2="300" y1="100" y2="100" class ="stave-line" />!-->
<text id="businessName"
name="businessName"
fill="#1e73be"
stroke="black"
y="70"
font-size="50"
x="150" textlength="0"
lengthadjust="spacingAndGlyphs">
Stagecraft
<animate
attributeName="x"
begin="1s"
dur="0.5s"
from="150"
to="0"
fill="freeze"/>
<animate
attributeName="textLength"
begin="1s"
dur="0.5s"
from="0"
to="300"
fill="freeze"/>
</text>
</svg>
<embed class="note1 note-hidden" name="note1" id="note1" src="./musicnote.svg" width="25" height="25" />
<embed class="note2 note-hidden" name="note2" id="note2" src="./musicnote.svg" width="25" height="25" />
<embed class="note3 note-hidden" name="note3" id="note3" src="./musicnote.svg" width="25" height="25" />
<embed class="note4 note-hidden" name="note4" id="note4" src="./musicnote.svg" width="25" height="25" />
<embed class="note5 note-hidden" name="note5" id="note5" src="./musicnote.svg" width="25" height="25" />
<embed class="note6 note-hidden" name="note6" id="note6" src="./musicnote.svg" width="25" height="25" />
<embed class="note7 note-hidden" name="note7" id="note7" src="./musicnote.svg" width="25" height="25" />
<embed class="note8 note-hidden" name="note8" id="note8" src="./musicnote.svg" width="25" height="25" />
<embed class="note9 note-hidden" name="note9" id="note9" src="./musicnote.svg" width="25" height="25" />
<embed class="note10 note-hidden" name="note10" id="note10" src="./musicnote.svg" width="25" height="25" />
</body>
</html>
Can you link to any release notes, bugs, pull requests, or MDN pages related to this?
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/lengthAdjust
Do you have anything more you want to share?
I'm unsure as to the impacts this has on android devices. On desktop I've only tried in firefox; which works as expected.
This x post has video of the desktop animation, which works as expected.
And also a screen recording of my iphone, which shows the same exact code failing to respect lengthAdjust="spacingAndGlyphs"
https://x.com/TheSonMorning/status/1950212124128481622
MDN URL
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/lengthAdjust
MDN metadata
MDN page report details
- Query:
svg.elements.text.lengthAdjust - Report started: 2025-07-29T15:11:52.220Z
I just tested, and the MDN example looks fine in Chrome 140, Firefox 143, Safari 18.6, and Safari iOS 18.6.
Setting textLength="0" (see this Playground) makes the difference, and textLength appears to be ignored in this case, in both Safari and Safari for iOS.
Minimal reproducible example: https://developer.mozilla.org/en-US/play?id=r9fFeuNkdUgNBnqssAEsKG5wNPe3ql%2B52%2FnUnDDRUCGvGUjuqqaYwKhYsAKtJ1YYLqwLfhUg%2B134O1H8
@AlexBestoso Can you please file a WebKit issue for this? There are related bugs 139210 and 219293, but these cover other cases.
Once the bug is filed, we can add notes to the Safari statements for textLength, mentioning this limitation, and pointing to the bug. It probably doesn't justify marking their implementation as partial though.
