2

EDIT: short story I made a code sandbox:

https://codesandbox.io/s/928m541rny?fontsize=14

open in Safari for mac and you will see this if you stretch a little bit the window: enter image description here

If you click on the text, it justifies correctly.

I have a very intriguing bug on Safari for mac (12.0.3), the text doesn't properly justify (screenshot 1) at first render, it only correctly justifies after clicking on it (screenshot 2).

I am using React with Material-UI and overriding the style of all my body2 directly in my theme.js file as follow:

body2: {
        textAlign: "justify"
      }

This implementation works correctly on Chrome. The string is coming from my backend which retrieves it from google firestore. The new lines are represented by \n characters. I am looking to solve this issue and not find a work around (as replacing \n character by <br /> html tags)

What I tried:

  • searching for issues related to text-align: justify on Safari
  • trying to play with the text-justify property

I actually have no clue where to look to solve this and never had a bug of this sort (change of css after click without any onClick logic implemented.). That's why I listed so many tags, because I have no real idea for the moment.

bug

After clicking on it, it displays correctly: afterclicking

Additional information:

          <Typography paragraph>
              {description}
          </Typography>

I also override the root Typography like this (if I don't, new lines from firestore strings are not displayed):

    MuiTypography: {
      root: {
        whiteSpace: "pre-line"
      },
      body2: {
        fontSize: 15,
        textAlign: "justify"
      }
    },
Quentin C
  • 1,739
  • 14
  • 26
  • 1
    It would be helpful if you could provide a [CodeSandbox](https://codesandbox.io/s/new) that reproduces this (at least when used on Mac Safari) without any backend dependencies (i.e. hard-code the text in JS). – Ryan Cogswell Mar 19 '19 at 15:51
  • Ok I am going to try – Quentin C Mar 19 '19 at 15:56
  • 1
    https://codesandbox.io/s/928m541rny?fontsize=14 – Quentin C Mar 19 '19 at 16:08
  • Bug happens in Safari if you stretch the window a little bit, on click of the text, it displays properly, I am actually very curious of knowing why the CSS updates onClick – Quentin C Mar 19 '19 at 16:14
  • 1
    It doesn't appear that the CSS is changing. It seems that Safari isn't recognizing the "last line" for the first paragraph of text so it justifies it like the other lines. For me (using browserstack.com), a click wasn't sufficient to fix it. I needed to highlight some of the text in the last line for it to fix itself. It seems like it figured out the "last line" aspect on a repaint? I suspect this is an interaction between `white-space: "pre-line"` and `text-align: "justify"`. – Ryan Cogswell Mar 19 '19 at 16:27
  • Check to see if you can reproduce this with a non-react html page that sets the text into a div via JavaScript (but otherwise is static). – Ryan Cogswell Mar 19 '19 at 16:28
  • I'll try later thanks I'll update my post if I find a fix – Quentin C Mar 19 '19 at 16:41

0 Answers0