On my landing page, I have some static text which is then followed by a word which I want to change every couple of seconds with transition. I decided to use react-text-transition for this. My issue is that I can't seem to align those to look properly and consistently across browsers.

Currently this is the code:

<Box sx={{display: "inline-block", mt: {xs: 5, sm: 8}, mb: 1}}>
    <Typography sx={{display: "ruby", typography: { xs: "h4", sm: "h3"}}}>Blah blah blah in your
        <Box sx={{width: '10px'}} />
        {<Box sx={{ display: "inline", minWidth: {xs: `${18 * ctaChangingTextListLongestWordLength + 5}px`, sm: `${24 * ctaChangingTextListLongestWordLength + 10}px`}}}><IntervalChangingText textList={ctaChangingTextList} interval={4000}/></Box>}
    </Typography>
</Box>

and the IntervalChangingText component:

import { useEffect, useState } from "react"
import TextTransition, { presets } from 'react-text-transition';

export default function IntervalChangingText(props) {
    const {textList, interval} = props
    const [textListIndex, setTextListIndex] = useState(0)

    useEffect(() => {
        const intervalId = setInterval(() => {
            setTextListIndex(textListIndex + 1)
        }, interval);
    
        return () => clearInterval(intervalId);
    }, [textListIndex]);

    return (
        <TextTransition springConfig={presets.slow}>{textList[textListIndex % textList.length]}</TextTransition>
    )
}

On Chrome, things look good aka like this:

-----------------------------
|Blah blah blah              |
|in your [text that changes] |
-----------------------------

However on Safari, they do not:

-----------------------------
|Blah blah blah              |
|in your                     |
|[text that changes]         |
-----------------------------

And in Firefox it's even worse, the text is all in one line and leaves its box:

-----------------------------
|Blah blah blah in your [text| that changes]
-----------------------------

I suspect the issue is with the display: "ruby" but I don't know how to make this work consistently with css across all browsers. Any ideas?

On my landing page, I have some static text which is then followed by a word which I want to change every couple of seconds with transition. I decided to use react-text-transition for this. My issue is that I can't seem to align those to look properly and consistently across browsers.

Currently this is the code:

<Box sx={{display: "inline-block", mt: {xs: 5, sm: 8}, mb: 1}}>
    <Typography sx={{display: "ruby", typography: { xs: "h4", sm: "h3"}}}>Blah blah blah in your
        <Box sx={{width: '10px'}} />
        {<Box sx={{ display: "inline", minWidth: {xs: `${18 * ctaChangingTextListLongestWordLength + 5}px`, sm: `${24 * ctaChangingTextListLongestWordLength + 10}px`}}}><IntervalChangingText textList={ctaChangingTextList} interval={4000}/></Box>}
    </Typography>
</Box>

and the IntervalChangingText component:

import { useEffect, useState } from "react"
import TextTransition, { presets } from 'react-text-transition';

export default function IntervalChangingText(props) {
    const {textList, interval} = props
    const [textListIndex, setTextListIndex] = useState(0)

    useEffect(() => {
        const intervalId = setInterval(() => {
            setTextListIndex(textListIndex + 1)
        }, interval);
    
        return () => clearInterval(intervalId);
    }, [textListIndex]);

    return (
        <TextTransition springConfig={presets.slow}>{textList[textListIndex % textList.length]}</TextTransition>
    )
}

On Chrome, things look good aka like this:

-----------------------------
|Blah blah blah              |
|in your [text that changes] |
-----------------------------

However on Safari, they do not:

-----------------------------
|Blah blah blah              |
|in your                     |
|[text that changes]         |
-----------------------------

And in Firefox it's even worse, the text is all in one line and leaves its box:

-----------------------------
|Blah blah blah in your [text| that changes]
-----------------------------

I suspect the issue is with the display: "ruby" but I don't know how to make this work consistently with css across all browsers. Any ideas?

• javascript
• css
• reactjs
• material-ui

1 Answer 1

I fixed it by removing the display: "ruby" but also forced the TextTransition component to use display: "inline-block" instead of the default flex.

Now it works on all major browsers as intended.