Boostrap 4 modal: bug sur Iphone

Marsh Posté le 03-12-2018 à 10:43:19

Bonjour,

j'ai un petit soucis avec une modale sur Mac et iphone.

le 3/4 de cette modale est coupée et donc illisible sur Iphone X et 6s (chrome et safari) et mac (safari, chrome semble ok).
Pas de problème sur Window, android (chrome, opera et firefox ok)

le site est sur Boostrap 4 beta 2

http://tof.cx/image/CwFV6
http://tof.cx/image/CwpAV
http://tof.cx/image/Cw4l1

le css

Code :

.modal {
margin-bottom: 0px!important;
}
.modal-body {
overflow-x: hidden;
overflow-y: scroll;
max-height: 200px;
}
#rgpd-modal .close-modal{
visibility: hidden;
}
#rgpd_button-close{
cursor: pointer;
}
.modal.left .modal-dialog{
-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
-moz-transition: opacity 0.3s linear, left 0.3s ease-out;
-o-transition: opacity 0.3s linear, left 0.3s ease-out;
transition: opacity 0.3s linear, left 0.3s ease-out;
overflow-y: auto;
top:auto;
right:auto;
left:1rem;
bottom:0;
position: fixed;
}
/* Portrait */
@media only screen
and (min-device-width: 320px)
{
#rgpd-modal{
width: 5rem;
max-width: 5rem;
}
.modal-dialog{
max-width: 352px;
}
}
@media only screen
and (min-device-width: 768px)
{
.modal-dialog{
max-width:645px
}
}

HTML

Code :

<div class="modal left" id="rgpd-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><p><?=$lang['RGPD']['MODAL_TITLE'];?></p></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" data-target="#rgpd-modal">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table class="table">
<tr>
<td><?=$lang['RGPD']['RGPD_RESPONSIBLE_PARTY']['TITLE']?></td>
<td><?=$lang['RGPD']['RGPD_RESPONSIBLE_PARTY']['TEXT']?></td>
</tr>
<tr>
<td><?=$lang['RGPD']['RGPD_PURPOSE']['TITLE']?></td>
<td><?=$lang['RGPD']['RGPD_PURPOSE']['TEXT']?></td>
</tr>
<tr>
<td><?=$lang['RGPD']['RGPD_Legitimization']['TITLE']?></td>
<td><?=$lang['RGPD']['RGPD_Legitimization']['TEXT']?></td>
</tr>
<tr>
<td><?=$lang['RGPD']['RGPD_Recipients']['TITLE']?></td>
<td><?=$lang['RGPD']['RGPD_Recipients']['TEXT']?></td>
</tr>
<tr>
<td><?=$lang['RGPD']['RGPD_Rights_TITLE']?></td>
<td><?=$lang['RGPD']['RGPD_Rights_line1']?>
<ul>
<li>- <?=$lang['RGPD']['RGPD_Rights_line2']?></li>
<li>- <?=$lang['RGPD']['RGPD_Rights_line3']?></li>
<li>- <?=$lang['RGPD']['RGPD_Rights_line4']?></li>
<li>- <?=$lang['RGPD']['RGPD_Rights_line5']?></li>
<li>- <?=$lang['RGPD']['RGPD_Rights_line6']?></li>
</ul>
</td>
</tr>
<tr>
<td><?=$lang['RGPD']['RGPD_Additional_Information']['TITLE']?></td>
<td><?=$lang['RGPD']['RGPD_Additional_Information']['TEXT']?></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button id="rgpd_button-close" type="button" data-keyboard="true" data-toggle="modal" class="btn btn-secondary" data-dismiss="modal" data-backdrop="true" data-target="#rgpd-modal">Close</button>
</div>
</div>
</div>
</div>

Auriez-vous une idée de comment fixer cela ? (j'ai un peu cherché sur internet mais je n'ai rien trouvé concernant ce bug en particulier)

Merci d avance

Message édité par tompouss le 03-12-2018 à 10:44:44

Reply

Marsh Posté le 03-12-2018 à 10:43:19

Reply

Marsh Posté le 03-12-2018 à 14:04:55

Tu saurais faire un codepen ou un jsfiddle avec ton pb?
Ce serait plus facile a diagnostiquer.

Reply

Marsh Posté le 03-12-2018 à 14:28:32

voici:

https://codepen.io/t0mspace/pen/GweYpX

---------------
collectionneur de pâtes thermiques

Reply

Marsh Posté le 03-12-2018 à 15:08:29

#rgpd-modal{
width: 5rem;
max-width: 5rem;
}

Le problème est là, c'est plus petit que ta modal, donc elle est cropé car tu as un overflow: hidden

Message édité par David Boring le 03-12-2018 à 15:19:12

Reply

Marsh Posté le 03-12-2018 à 16:15:27

Super merci pour vos réponses

---------------
collectionneur de pâtes thermiques

Reply

Marsh Posté le 07-12-2018 à 08:56:47

Je comprends pas pq ce bug n'apparait que sur Mac, et pas sur PC ni android

Quelqu'un aurait une explication ?

et question subsidiaire:

Vu que le simulateur iphone de Chrome n'affichait pas ce bug,
Y a -t-il un autre moyen de simuler l'affichage d'une page web iphone ou un mac, sur PC ?

---------------
collectionneur de pâtes thermiques

Reply

Boostrap 4 modal: bug sur Iphone

Sujets relatifs:

Leave a Replay