When viewing my React app on a desktop in Chrome, Firefox and Safari, the page appears as expected:
It even appears normally when viewing it in portrait mode on an iPhone:
However, when viewing on the same iPhone in landscape mode, I see a strange "å" character between the two paragraphs:
I have reproduced this problem on multiple iPhones, as well as my XCode iPhone simulator. Using Safari's DOM inspector, I copied the DOM rendered by the iPhone simulator, and the code appears as follows:
<p class="publication-detail__answer-text">My entire career—from creating a second-chance high school to running an educational facility on Riker’s Island—has been focused on working with young people who haven't necessarily succeeded in school. In my experience, the facilities that are the most successful in helping young people meet their goals are the ones that hire specially trained facilitators. Often called peer counselors, advocate coaches, or house mothers and fathers, these professionals provide very different functions from guidance counselors or social workers.
By sharing their own experiences and struggles, peer coaches develop bonds of trust with young people facing real challenges. They serve as role models, and demonstrate to kids that they can take charge of their own lives, even when they think they might not be capable. I frequently met these types of coaches in 12-step programs, anti-recidivism programs, and group homes for emancipated foster youth, but was surprised that I rarely encountered them in schools.
/* Much more text */
</p>
I noticed there are multiple whitespace characters between the 2 paragraphs, so I copied them into an ASCII converter and got "0x200x0a0x0a0x20". I believe this is relevant but I am confused since W3schools.com tells me the UTF-8 equivalent of "å" is "%C3%A5".
The React component which renders the paragraph is shown below. Note that the relevant part of the component is the
tag:
const PublicationDetailViewQuestionAnswer = React.createClass({
render: function () {
return (
<div className="publication-detail__main-column__question-answer">
<h3 className="publication-detail__question-text">{this.props.question}</h3>
<p className="publication-detail__answer-text">{this.props.answer}</p>
</div>
);
}
});
export default PublicationDetailViewQuestionAnswer;
The only CSS that I am applying to this class is the following:
.publication-detail__answer-text {
white-space: pre-wrap;
}
I do see a single whitespace character as well as the line break between the two paragraphs, but I don't see any suspicious characters in the DOM. I'd like to not only know why this is appearing in the first place, but also why it only appears in landscape mode and how to ensure it does not appear at all.
EDIT: The React component is being served by a Rails app with a MySQL database, the text inside the
tag is captured using a Rails form in conjunction with the Simple Form gem, and the default settings in the database.yml file look like this:
default: &default
adapter: mysql2
encoding: utf8mb4
collation: utf8mb4_bin
username: <%= ENV['RDS_USERNAME'] %>
password: <%= ENV['RDS_PASSWORD'] %>
socket: /tmp/mysql.sock
host: <%= ENV['RDS_HOSTNAME'] %>
pool: <%= ENV["DB_POOL"] || ENV['MAX_THREADS'] || 5 %>
checkout_timeout: <%= ENV["DB_CHECKOUT_TIMEOUT"] || 5 %>
EDIT #2: when I open the Rails console and output the text, I see that " \r\n\r\n" (i.e. a space and 2 "carriage return + newline" combinations) separates the 2 paragraphs. However, this same pattern also separates every paragraph, but I only see the strange character in between the first and 2nd paragraphs.
