Разрыв макета Flexbox в браузере Safari - PullRequest
Новая
       0

Разрыв макета Flexbox в браузере Safari

2 голосов
/ 08 апреля 2020

Я пытаюсь создать страницу стиля сообщения чата, используя bootstrap и пользовательский код CSS. Код отлично работает в браузере chrome, но на мобильных и настольных компьютерах Safari макет не работает.

Проблема заключается в том, что элементы div с изображениями перекрываются, что означает, что изображения и текст отображаются друг над другом. Если вы запустите пример кода ниже, последние два сообщения будут отображаться друг над другом. В браузере Chrome он отображается правильно.

Я даже проверил и префикс всех своих CSS, поэтому он работает в другом браузере, но, похоже, не влияет на браузер Safari.

Любая помощь будет оценена. Спасибо. 

.messages div:first-of-type {
  margin-top: 0 !important;
}

.messages {
  height: 69vh;
  overflow-y: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow-x: hidden;
}

.profile-image {
  height: 50px;
  width: 50px;
  -o-object-fit: contain;
  object-fit: contain;
  border-radius: 100%;
  border: 1px solid #efefef;
}

.message {
  white-space: pre-line;
}

@media (max-width: 500px) {
  .messages {
    height: 300px;
  }
  .profile-image {
    height: 30px;
    width: 30px;
  }
  .avatar-circle-sm {
    height: 30px;
    width: 30px;
  }
  .avatar-circle-sm .initials {
    top: 2.5px;
    font-size: 16px;
  }
}

.attachments {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  font-size: 0.8rem;
}

.attachments a {
  color: #0056b3;
  font-weight: bold;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.attachments .upload-preview {
  max-width: 200px;
  max-height: 200px;
  -o-object-fit: contain;
  object-fit: contain;
}

.profile-image {
  -o-object-fit: cover !important;
  object-fit: cover !important;
}

.dropdown.settings .dropdown-toggle::after {
  display: none;
}

.dropdown.settings .dropdown-toggle {
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  display: none;
}

.msg:hover {
  background: #f3f3f3;
}

.msg:hover .dropdown.settings .dropdown-toggle {
  display: block;
}

.dropdown.settings .dropdown-menu li {
  padding: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.dropdown.settings .dropdown-menu li i {
  width: 20px;
}

.dropdown.settings .dropdown-menu li:hover {
  cursor: pointer;
  background: #f1f1f1;
}

.messages {
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.messages::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.files-container {
  max-height: 235px;
  overflow: auto;
}

.msg {
  margin: 0 1.5rem;
}

.date-row {
  background: #F7F7F7;
  padding: 5px 20px;
}

.messages {
  position: relative;
}

.date-row-fixed {
  background: #F7F7F7;
  padding: 5px 20px;
  position: fixed;
  width: 100%;
  z-index: 10;
  display: none;
}

@media (max-width: 500px) {
  .msg {
    margin: 0 0.5rem;
  }
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.attachments:before,
.attachments:after,
.d-flex:before,
.d-flex:after {
  content: normal;
}

.attachments div {
  -ms-flex: 0 0 auto;
  -webkit-box-flex: 0;
  flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div class="card" style="max-width: 1000px;">
        <div class="card-header">
          <i class="fas fa-envelope"></i> Messages - Safari Test </div>
        <div class="card-body p-0">
          <div class="messages" style="height: 732px;">
            <div class="date-row">Thursday, April 2, 2020</div>
            <div class="sender msg d-flex" data-id="1" style="margin-top: 10px; margin-bottom: 10px;">
              <div class="avatar">
                <div>
                  <img src="https://place-hold.it/50x50" class="profile-image" alt="User Profile">
                </div>
              </div>
              <div class="body ml-2 w-100">
                <div class="d-flex justify-content-between m-0">
                  <span class="font-weight-bold">User 2</span>
                  <div class="d-flex" style="flex-grow: unset; flex-direction: unset; justify-content: unset;">
                    <div class="dropdown settings">
                      <button class="dropdown-toggle text-secondary" type="button" data-toggle="dropdown"><i class="fas fa-cog"></i></button>
                      <ul class="dropdown-menu">

                        <li class="delete-msg"><i class="fas fa-times"></i> <span class="ml-1">Delete</span></li>
                        <li class="quote-msg"><i class="fas fa-quote-left"></i> <span class="ml-1">Quote</span></li>
                      </ul>
                    </div>
                    <span class="text-secondary msg-time ml-2" data-time="2020-04-02 11:21:53">4:51 PM</span>
                  </div>
                </div>
                <div class="message mt-2">Hello </div>
                <div class="attachments">
                  <div class="clearfix"></div>
                </div>
                <div class="clearfix"></div>
              </div>
              <div class="clearfix"></div>
            </div>
            <div class="receiver msg d-flex" data-id="5" style="margin-top: 10px; margin-bottom: 10px;">
              <div class="avatar">
                <div>
                  <img src="https://place-hold.it/50x50" class="profile-image" alt="User Profile">
                </div>
              </div>
              <div class="body ml-2 w-100">
                <div class="d-flex justify-content-between m-0">
                  <span class="font-weight-bold">User 1</span>
                  <div class="d-flex" style="flex-grow: unset; flex-direction: unset; justify-content: unset;">
                    <div class="dropdown settings">
                      <button class="dropdown-toggle text-secondary" type="button" data-toggle="dropdown"><i class="fas fa-cog"></i></button>
                      <ul class="dropdown-menu">
                        <li class="quote-msg"><i class="fas fa-quote-left"></i> <span class="ml-1">Quote</span></li>
                      </ul>
                    </div>
                    <span class="text-secondary msg-time ml-2" data-time="2020-04-02 11:33:58">5:03 PM</span>
                  </div>
                </div>
                <div class="message mt-2">Hello </div>
                <div class="attachments">
                </div>
              </div>
            </div>
            <div class="sender msg d-flex" data-id="7" style="margin-top: 10px; margin-bottom: 10px;">
              <div class="avatar">
                <div>
                  <img src="https://place-hold.it/50x50" class="profile-image" alt="User Profile">
                </div>
              </div>
              <div class="body ml-2 w-100">
                <div class="d-flex justify-content-between m-0">
                  <span class="font-weight-bold">User 2</span>
                  <div class="d-flex" style="flex-grow: unset; flex-direction: unset; justify-content: unset;">
                    <div class="dropdown settings">
                      <button class="dropdown-toggle text-secondary" type="button" data-toggle="dropdown"><i class="fas fa-cog"></i></button>
                      <ul class="dropdown-menu">

                        <li class="delete-msg"><i class="fas fa-times"></i> <span class="ml-1">Delete</span></li>
                        <li class="quote-msg"><i class="fas fa-quote-left"></i> <span class="ml-1">Quote</span></li>
                      </ul>
                    </div>
                    <span class="text-secondary msg-time ml-2" data-time="2020-04-02 14:59:20">8:29 PM</span>
                  </div>
                </div>
                <div class="message mt-2">hi. This is a test message Testing 123 </div>
                <div class="attachments">
                  <div class="clearfix"></div>
                </div>
                <div class="clearfix"></div>
              </div>
              <div class="clearfix"></div>
            </div>
            <div class="sender msg d-flex" data-id="8" style="margin-top: 5px; margin-bottom: 5px;">
              <div class="avatar" style="display: none;">
                <div>
                  <img src="https://place-hold.it/50x50" class="profile-image" alt="User Profile">
                </div>
              </div>
              <div class="body ml-2 w-100">
                <div class="d-flex justify-content-between m-0">
                  <div class="message mt-2" style="margin-left: 50px; flex-grow: unset; flex-direction: unset; justify-content: unset;">Testing another message 123 </div>
                  <span class="font-weight-bold" style="display: none;">User 2</span>
                  <div class="d-flex" style="flex-direction: row;">
                    <div class="dropdown settings">
                      <button class="dropdown-toggle text-secondary" type="button" data-toggle="dropdown"><i class="fas fa-cog"></i></button>
                      <ul class="dropdown-menu">

                        <li class="delete-msg"><i class="fas fa-times"></i> <span class="ml-1">Delete</span></li>
                        <li class="quote-msg"><i class="fas fa-quote-left"></i> <span class="ml-1">Quote</span></li>
                      </ul>
                    </div>
                    <span class="text-secondary msg-time ml-2" data-time="2020-04-02 14:59:29" style="visibility: hidden;">8:29 PM</span>
                  </div>
                </div>

                <div class="attachments" style="margin-left: 50px;">
                  <div class="clearfix"></div>
                </div>
                <div class="clearfix"></div>
              </div>
              <div class="clearfix"></div>
            </div>
            <div class="date-row">Friday, April 3, 2020</div>
            <div class="receiver msg d-flex" data-id="24" style="margin-top: 10px; margin-bottom: 10px;">
              <div class="avatar">
                <div>
                  <img src="https://place-hold.it/50x50" class="profile-image" alt="User Profile">
                </div>
              </div>
              <div class="body ml-2 w-100">
                <div class="d-flex justify-content-between m-0">
                  <span class="font-weight-bold">User 1</span>
                  <div class="d-flex" style="flex-grow: unset; flex-direction: unset; justify-content: unset;">
                    <div class="dropdown settings">
                      <button class="dropdown-toggle text-secondary" type="button" data-toggle="dropdown"><i class="fas fa-cog"></i></button>
                      <ul class="dropdown-menu">
                        <li class="quote-msg"><i class="fas fa-quote-left"></i> <span class="ml-1">Quote</span></li>
                      </ul>
                    </div>
                    <span class="text-secondary msg-time ml-2" data-time="2020-04-03 03:47:05" style="visibility: visible;">9:17 AM</span>
                  </div>
                </div>
                <div class="message mt-2">JE </div>
                <div class="attachments">
                </div>
              </div>
            </div>
            <div class="sender msg d-flex" data-id="26" style="margin-top: 10px; margin-bottom: 10px;">
              <div class="avatar">
                <div>
                  <img src="https://place-hold.it/50x50" class="profile-image" alt="User Profile">
                </div>
              </div>
              <div class="body ml-2 w-100">
                <div class="d-flex justify-content-between m-0">
                  <span class="font-weight-bold">User 2</span>
                  <div class="d-flex" style="flex-grow: unset; flex-direction: unset; justify-content: unset;">
                    <div class="dropdown settings">
                      <button class="dropdown-toggle text-secondary" type="button" data-toggle="dropdown"><i class="fas fa-cog"></i></button>
                      <ul class="dropdown-menu">

                        <li class="delete-msg"><i class="fas fa-times"></i> <span class="ml-1">Delete</span></li>
                        <li class="quote-msg"><i class="fas fa-quote-left"></i> <span class="ml-1">Quote</span></li>
                      </ul>
                    </div>
                    <span class="text-secondary msg-time ml-2" data-time="2020-04-03 16:56:20" style="visibility: visible;">10:26 PM</span>
                  </div>
                </div>
                <div class="message mt-2">this is some text </div>
                <div class="attachments">
                  <a href="https://place-hold.it/200x200" download="dog1.jpg"><i class="fas fa-file"></i> dog1.jpg <small class="text-muted ml-1">133.63 KB</small>
                                            <span class="delete-attachment ml-2" style="font-size: 16px;" data-attachment="5e876ab40dc05.jpg" data-id="5"><i class="fas fa-times"></i></span>
                                            <div>
                                                <img src="https://place-hold.it/200x200" class="upload-preview mb-2" alt="Upload Preview">
                                            </div>
                                        </a>

                  <div class="clearfix"></div>
                </div>
                <div class="clearfix"></div>
              </div>
              <div class="clearfix"></div>
            </div>
            <div class="sender msg d-flex" data-id="27" style="margin-top: 5px; margin-bottom: 5px;">
              <div class="avatar" style="display: none;">
                <div>
                  <img src="https://place-hold.it/50x50" class="profile-image" alt="User Profile">
                </div>
              </div>
              <div class="body ml-2 w-100">
                <div class="d-flex justify-content-between m-0">
                  <div class="message mt-2" style="margin-left: 50px; flex-grow: unset; flex-direction: unset; justify-content: unset;">some text and 2 images </div>
                  <span class="font-weight-bold" style="display: none;">User 2</span>
                  <div class="d-flex" style="flex-direction: row;">
                    <div class="dropdown settings">
                      <button class="dropdown-toggle text-secondary" type="button" data-toggle="dropdown"><i class="fas fa-cog"></i></button>
                      <ul class="dropdown-menu">

                        <li class="delete-msg"><i class="fas fa-times"></i> <span class="ml-1">Delete</span></li>
                        <li class="quote-msg"><i class="fas fa-quote-left"></i> <span class="ml-1">Quote</span></li>
                      </ul>
                    </div>
                    <span class="text-secondary msg-time ml-2" data-time="2020-04-03 16:56:57" style="visibility: hidden;">10:26 PM</span>
                  </div>
                </div>

                <div class="attachments" style="margin-left: 50px;">
                  <a href="https://place-hold.it/200x200" download="dog3.jpg"><i class="fas fa-file"></i> dog3.jpg <small class="text-muted ml-1">176.37 KB</small>
                                            <span class="delete-attachment ml-2" style="font-size: 16px;" data-attachment="5e876ad937e50.jpg" data-id="6"><i class="fas fa-times"></i></span>
                                            <div>
                                                <img src="https://place-hold.it/200x200" class="upload-preview mb-2" alt="Upload Preview">
                                            </div>
                                        </a>

                  <a href="https://place-hold.it/200x200" download="dog2.jpg"><i class="fas fa-file"></i> dog2.jpg <small class="text-muted ml-1">81.61 KB</small>
                                            <span class="delete-attachment ml-2" style="font-size: 16px;" data-attachment="5e876ad9386be.jpg" data-id="7"><i class="fas fa-times"></i></span>
                                            <div>
                                                <img src="https://place-hold.it/200x200" class="upload-preview mb-2" alt="Upload Preview">
                                            </div>
                                        </a>

                  <div class="clearfix"></div>
                </div>
                <div class="clearfix"></div>
              </div>
              <div class="clearfix"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 08 апреля 2020

Bootstrap 4 не работает в сафари, если вы используете windows или android.

, вы можете проверить здесь:

ссылка 1: https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/

ссылка 2: https://toolset.com/forums/topic/safari-not-finding-two-bootstrap-4-css-files-but-chrome-succeeds/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...