При рендеринге многострочного текстового поля richtext через системный браузер chrome при рендеринге многострочного текстового поля проблем не возникает. Но когда речь идет о мобильном браузере chrome, а также о других мобильных браузерах, он не выполняет рендеринг, как это показано при рендеринге в системном браузере, он просто выдает содержимое, заключенное в теги html. Я приложил код и скриншот проблемы. Мобильный chrome браузер Система Chrome Браузер
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<style>
.timeline {
list-style-type: none;
display: flex;
align-items: center;
justify-content: center;
}
.li {
transition: all 100ms ease-in;
}
.process {
margin-bottom: 5px;
padding: 10px 10px;
display: flex;
align-items: center;
font-size: 12px;
font-weight: 100;
}
.status {
padding: 15px 10px;
display: flex;
align-items: center;
flex-direction: column;
border-top: 2px solid #CFD2D5;
position: relative;
transition: all 100ms ease-in;
}
.status .author {
font-weight: 200;
}
.status .date {
font-weight: 200;
font-size: 12px;
}
.status:before {
content: "";
width: 25px;
height: 25px;
background-color: white;
border-radius: 25px;
border: 1px solid #8A8A8A;
position: absolute;
top: -15px;
;
left: 42%;
transition: all 100ms ease-in;
}
.li.complete .status {
border-top: 2px solid #22BB22;
}
.li.complete .status:before {
background-color: #22BB22;
border: none;
transition: all 100ms ease-in;
}
.li.complete .status .author {
color: #22BB22;
}
.li.complete .status .date {
color: #22BB22;
}
</style>
</head>
<body>
<ul class="timeline" id="timeline">
<li class="li" id="" Request Submitted ">
<div class="process ">
<span class="name ">Request Submitted</span>
</div>
<div class="status ">
<span class="author ">Initiator</span>
<span class="date ">06/06/2016</span>
</div>
</li>
<li class="li " id="Manager Approval ">
<div class="process ">
<span class="name ">Manager Approval</span>
</div>
<div class="status ">
<span class="author ">Manager</span>
<span class="date ">06/06/2016</span>
</div>
</li>
<li class="li " id="Finance Approval ">
<div class="process ">
<span class="name ">Finance Approval</span>
</div>
<div class="status ">
<span class="author ">Finance Manager</span>
<span class="date ">06/06/2016</span>
</div>
</li>
<li class="li " id="Request Processed ">
<div class="process ">
<span class="name ">Procurement</span>
</div>
<div class="status ">
<span class="author ">Proc Admin</span>
<span class="date ">TBD</span>
</div>
</li>
</ul>
</body>
</html>