Позиция: липкий, несовместимый между устройствами Ma c и Windows в Google Chrome - PullRequest
Новая
       7

Позиция: липкий, несовместимый между устройствами Ma c и Windows в Google Chrome

0 голосов
/ 18 июня 2020

[РЕДАКТИРОВАТЬ]: я обновил код, включив в него таблицу, чтобы лучше диагностировать проблему. Просто примечание при запуске кода, интервал будет сброшен, если он не запущен в полноэкранном режиме.

У меня проблема с использованием position: sticky для некоторых элементов таблицы. Проблема в этом пробеле - 1 , видимом между тремя верхними строками таблицы. Этот пробел, похоже, присутствует только в Google Chrome на устройствах Ma c. На устройстве windows в Google Chrome нет пробелов - 2 .

Мы также протестировали другие браузеры, и во всех них таблица отображается правильно. Кажется, эта проблема возникает только у Ma c Chrome.

Для справки, вот код, делающий три строки этой таблицы липкими. Остальная часть css представляет собой довольно стандартный стиль таблицы. 

.follow1{
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -o-sticky;
  position: -ms-sticky;
  position: sticky;
  top:0;
  z-index:2;
}
.follow2{
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -o-sticky;
  position: -ms-sticky;
  position: sticky;
  top:8.5%;
  background:#f9f9f9 !important;
}
.follow3{
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -o-sticky;
  position: -ms-sticky;
  position: sticky;
  top:14.5%;
  background:#f9f9f9 !important;
  color:black !important;
  border-bottom:1px dotted lightgray;
}

/*==========Decorative css==========*/
.offer-table table{
  border-collapse: separate;
  border-spacing: 15px 0px;
}
.offer-table table td{
  font-size:16px;
  padding:1rem;
  border-top:1px dotted lightgray;
}
.offer-table .table-orange td{
  color:#ff612c;
  border-top:none;
  font-size:20px;
}
.offer-table table td:first-child{
  text-align:right;
}
.offer-table table td:not(:first-child){
  border-left:1px solid lightgray;
  border-right:1px solid lightgray;
  background:#f9f9f9;
  text-align:center;
  width:25%;
}
.offer-table table thead td{
  border:none;
  color:white;
}
.offer-table table thead td:not(:first-child){
  font-weight:bold;
  font-size:18px;
  line-height:1.2rem;
  padding:1.5rem;
}
.offer-table table thead td:nth-child(2){
  background:#554971;
  border:1px solid lightgray;/*These need to change*/
  border-bottom:none;
}
.offer-table table thead td:nth-child(3){
  background:#63768d;
  border:1px solid lightgray;/*These need to change*/
  border-bottom:none;
}
.offer-table table thead td:nth-child(4){
  background:#8ac6d0;
  border:1px solid lightgray;/*These need to change*/
  border-bottom:none;
}
.offer-table .table-colors td:nth-child(2),.offer-table .table-colors td:nth-child(3){
  color:#0095ff;
}
.red{
  color:#ff612c !important;
}
.offer-table .table-colors td:nth-child(4){
  color:#ff612c;
}

.offer-table .black td:nth-child(4),.offer-table .custom-color-1 td:nth-child(3),.offer-table .custom-color-2 td:nth-child(2){
  color:black;
}
.offer-table .custom-color-2 td:nth-child(3){
  color:#ff612c;
}
.color-blue td:nth-child(4){
  color:#0095ff !important;
}
.cta-table div{
  width:100%;
}
.cta-table{
  border-bottom:1px solid lightgray;
}
.white{
  background:white !important;
}
<div class="offer-table">
<table>
<thead>
<tr class="table-headings">
<td class="follow1 white">&nbsp;</td>
<td class="follow1">Successful Business<br>Edition</td>
<td class="follow1">Successful Practice<br>Edition</td>
<td class="follow1">Start Up Practice<br>Edition</td>
</tr>
<tr class="table-orange">
<td class="follow2 white">Upfront License</td>
<td class="follow2">$13,996</td>
<td class="follow2">$9,995</td>
<td class="follow2">$7,995</td>
</tr>
<tr>
<td class="follow3 white">Ongoing Monthly License</td>
<td class="follow3">$139.95</td>
<td class="follow3">$119.95</td>
<td class="follow3">$59.95</td>
</tr>
</thead>
<tbody>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="table-colors">
<td><a href="https://google.ca" target="_blank" rel="noopener"><strong>Staff Access</strong></a></td>
<td>5 Staff Users<br><em>Additional Staff $10 user/month</em></td>
<td class="red">✖</td>
<td>✖</td>
</tr>
<tr>
<td><a href="https://google.ca" target="_blank" rel="noopener"><strong>Business Procedure Manuals</strong></a></td>
<td>All<br>Manuals</td>
<td>All<br>Manuals</td>
<td>Choice of<br>One Manual</td>
</tr>
<tr class="table-colors">
<td>Quickbooks Desktop</td>
<td>check</td>
<td>check</td>
<td>✖</td>
</tr>
<tr class="table-colors">
<td>Quickbooks Online</td>
<td>check</td>
<td>check</td>
<td>✖</td>
</tr>
<tr>
<td><a href="https://google.ca" target="_blank" rel="noopener"><strong>Online Certification Programs</strong></a></td>
<td>All<br>Certification Programs</td>
<td>All<br>Certification Programs</td>
<td>Choice of<br>One Certification Program</td>
</tr>
<tr class="table-colors">
<td>Quickbooks Desktop</td>
<td>check</td>
<td>check</td>
<td>✖</td>
</tr>
<tr class="table-colors">
<td>Quickbooks Online</td>
<td>check</td>
<td>check</td>
<td>✖</td>
</tr>
<tr>
<td><a href="https://google.ca" target="_blank" rel="noopener"><strong>Standard Operating Procedure Checklists</strong></a></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="table-colors color-blue">
<td>Client Automation Implementation Checklists</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Session Checklist</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Filing Checklist</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Year End Checklist</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Payroll Checklist</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Quarterly Reporting Checklist</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Quarterly Finance Fitness Review Checklists</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr>
<td><a href="https://google.ca" target="_blank" rel="noopener"><strong>Sales &amp; Marketing Module</strong></a></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="table-colors color-blue">
<td>Business Identity Template</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Website Templates</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors">
<td>Sales Conversion Scripts</td>
<td>check</td>
<td>check</td>
<td>✖</td>
</tr>
<tr class="table-colors">
<td>Sales Presentation Scripts</td>
<td>check</td>
<td>check</td>
<td>✖</td>
</tr>
<tr class="table-colors">
<td>Referral System</td>
<td>check</td>
<td>check</td>
<td>✖</td>
</tr>
<tr class="table-colors">
<td>Networking System</td>
<td>check</td>
<td>check</td>
<td>✖</td>
</tr>
<tr class="table-colors">
<td>Marketing Templates</td>
<td>check</td>
<td>check</td>
<td>✖</td>
</tr>
<tr class="table-colors">
<td>Sales Conversion Scripts</td>
<td>check</td>
<td>check</td>
<td>✖</td>
</tr>
<tr>
<td><a href="https://google.ca" target="_blank" rel="noopener"><strong>Human Resources Module</strong></a></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="table-colors">
<td>Advertising Templates &amp; Guidelines</td>
<td>check</td>
<td>check</td>
<td>✖</td>
</tr>
<tr class="table-colors">
<td>Applicant Filter</td>
<td>check</td>
<td>check</td>
<td>✖</td>
</tr>
<tr class="table-colors">
<td>Phone Qualification Process</td>
<td>check</td>
<td>check</td>
<td>✖</td>
</tr>
<tr class="table-colors">
<td>Candidate Skills &amp; Speed Test</td>
<td>check</td>
<td>check</td>
<td>✖</td>
</tr>
<tr class="table-colors">
<td>Interview Questions &amp; Evaluation</td>
<td>check</td>
<td>check</td>
<td>✖</td>
</tr>
<tr class="table-colors">
<td>New Hire Onboarding Program</td>
<td>check</td>
<td>check</td>
<td>✖</td>
</tr>
<tr class="table-colors">
<td>New Hire Training Program</td>
<td>check</td>
<td>check</td>
<td>✖</td>
</tr>
<tr>
<td><a href="https://google.ca" target="_blank" rel="noopener"><strong>Standard Operating Procedures Cloud Apps</strong></a></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="table-colors color-blue">
<td>Workflow/Practice Management Software</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Document Retrieval</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Document Storage</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>CRM</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Time Tracking</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Payment Apps</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Virtual Communication</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Payroll Apps</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Value Added Service Apps</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>E-Signatures</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Security</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Accounting Software Dashboards</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr>
<td><a href="https://google.ca" target="_blank" rel="noopener"><strong>Business Success Support</strong></a></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="table-colors color-blue">
<td>Unlimited Support</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Unlimited Updates</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Monthly Success Calls</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Weekly Group Mentoring Calls</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Exclusive Licensee Only Facebook Group</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Knowledge Base Forums</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Guided Implementation and Getting Started Program</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors">
<td>Access to Monthly Group Mastermind</td>
<td>check</td>
<td>check</td>
<td>✖</td>
</tr>
<tr class="table-colors custom-color-2">
<td><a href="https://google.ca" target="_blank" rel="noopener"><strong>Accelerate 2 Advisor</strong></a><br><em>Mentoring Program</em></td>
<td><em>Can be Added<br>$10,000 Anually</em></td>
<td>✖</td>
<td>✖</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>&nbsp;</td>
<td class="cta-table"></td>
<td class="cta-table"></td>
<td class="cta-table"></td>
</tr>
</tfoot>
</table>
</div>

Три верхние строки таблицы содержат соответствующие классы, чтобы все они прокручивались друг с другом. Предполагаемый эффект состоит в том, чтобы три верхние строки таблицы прокручивались вместе с пользователем по остальной части таблицы.

...