我在網站上使用固定標題以在滾動內容元素時保持徽標&菜單元素可見。似乎有一個JavaScript會創建一個「幻燈片」或transistion,直到頂部/頭部下方的內容頂部。我覺得這很煩人,但可以忍受。在頁面加載的固定標題下的內容「幻燈片」在Safari上打破
我的問題是,在使用Safari的iPad設備(適用於iPhone)上,內容不會滾動到內容區域的頂部。如果您按下並在屏幕上向下拖動,您可以看到內容嵌套在標題下。釋放屏幕,它在標題下滑回。
所有其他瀏覽器/操作系統正常工作。
我加入了一些本應處理所有移動設備的CSS,並使用padding/margin標記在標題下面配置了元素以給它一些空間。這似乎工作很好,除了在一些iPad移動設備上,我們得到一個A problem occurred with this webpage so it was reloaded。我們刪除這個CSS,並加載正常。
這樣,nixes的CSS作爲一個修復,所以它留給我的令人討厭的幻燈片效果,我在想什麼?
這是什麼幻燈片內容元素,以及如何使其響應所有設備,包括Safari/iPad,或者如何刪除它或使用CSS在內容頂部正確啓動?
測試地點:http://www.goroyalshell.net/
修訂 CSS隔離代碼,當插入CSS網頁導致錯誤:
.property-item.featured:hover .property-item.featured.title-above-image .property-title::after {
background-color: transparent;
}
.property-item .property-thumbnail {
position: relative;
overflow: hidden;
}
.property-item a {
color: inherit;
}
.property-item img {
max-width: none;
width: 100%;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
@media (min-width: 768px) {
.property-item img {
width: -webkit-calc(120%);
width: calc(120%);
-webkit-filter: grayscale(0%);
filter: none;
-webkit-transform: translate3d(-10px, 0, 0);
-moz-transform: translate3d(-10px, 0, 0);
-ms-transform: translate3d(-10px, 0, 0);
-o-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
}
.property-item figcaption {
top: 0;
height: 100%;
width: 100%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
@media (min-width: 768px) {
.property-item figcaption {
position: absolute;
text-align: right;
}
}
@media (min-width: 768px) {
.property-item:hover img {
filter: gray;
-webkit-filter: grayscale(100%);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.property-item:hover.title-over-image .property-title,
.property-item:hover.title-over-image .tag,
.property-item:hover.title-above-image .tag-right {
opacity: 0;
}
}
.property-item:hover .property-excerpt {
opacity: 1;
}
.property-item:hover .property-excerpt::after {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.property-item:hover .arrow-right {
opacity: 0;
}
.property-item .property-title {
overflow: hidden;
position: relative;
z-index: 0;
padding: 10px 15px;
text-align: center;
background-color: rgba(255, 255, 255, 0.9);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
@media (min-width: 768px) {
.property-item .property-title {
text-align: right;
}
}
.property-item .title {
margin: 0 0 0.25em !important;
font-size: 1.4em;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.property-item .address {
opacity: 0.6;
margin: 0 !important;
font-size: 1.1em;
text-transform: none;
}
.property-item .subtitle {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #999999;
}
.property-item .property-excerpt {
display: none;
position: absolute;
top: 0;
width: 100%;
height: 100%;
padding: 15px 15px;
opacity: 0;
line-height: 1.7;
text-align: left;
background-color: rgba(255, 255, 255, 0.9);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
@media (min-width: 768px) {
.property-item .property-excerpt {
display: block;
}
}
.property-item .property-excerpt span {
font-size: 1.4em;
color: #666666;
text-transform: uppercase;
}
.property-item .property-excerpt::after {
position: absolute;
opacity: 0.5;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: #43becc;
content: '';
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.property-item .property-excerpt p {
margin-top: 0.5em;
font-size: 1.1em;
color: #999999;
}
.property-item .property-content {
text-align: center;
background-color: #fff;
}
.property-item .property-content .property-meta {
min-height: 85px;
}
.property-item .property-content .property-meta > div {
width: 50%;
/*
@media(min-width: 1200px) {
width: 25%;
}
*/
}
.property-item .property-price {
overflow: hidden;
padding: 0 15px;
line-height: 50px;
color: #666666;
text-align: left;
border-top: 1px solid #f6f6f6;
}
@media (min-width: 768px) {
.property-item .property-price {
line-height: 60px;
}
}
@media (min-width: 992px) {
.property-item .property-price {
font-size: 1.2em;
}
}
.property-item .property-price span {
font-weight: 300;
}
.property-item .property-price i {
opacity: 0.25;
line-height: inherit;
margin-right: 10px;
display:inline-block !important;
}
.property-item .property-price i:hover {
opacity: 0.75;
cursor: pointer;
color:#aaa !important;
}
.property-item .property-price .property-status {
display: inline-block;
display: none;
float: left;
font-size: 0.8em;
text-transform: uppercase;
}
.property-item .property-price .price-tag {
float: right;
color: #999999;
}
.property-meta {
padding: 15px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.9em;
line-height: 2;
color: #999999;
text-align: center;
}
@media (min-width: 768px) {
.property-meta {
text-align: left;
}
}
.property-meta a {
color: #999999;
}
.property-meta a:hover {
color: #666666;
}
.property-meta a:hover .meta-data {
cursor: pointer;
}
.property-meta .meta-title {
display: inline-block;
width: 20px;
font-weight: 700;
}
.property-meta > div {
float: left;
}
.property-meta .meta-data {
display: inline-block;
}
.property-meta .meta-data:hover {
cursor: default;
}
.add-to-favorites:hover {
cursor: pointer;
}
#compare-properties-popup {
display: none;
margin: 30px 0;
padding: 30px 0;
border-top: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
}
#compare-properties-thumbnails ul {
margin-bottom: 0;
}
#compare-properties-thumbnails li {
float: left;
margin-bottom: 30px;
}
#property-comparison-table .comparison-header {
display: inline-block;
width: 20%;
vertical-align: top;
}
#property-comparison-table .comparison-data {
position: relative;
display: inline-block;
width: 39%;
margin-left: 1%;
vertical-align: top;
}
#property-comparison-table .comparison-data a {
color: inherit;
}
#property-comparison-table .comparison-data.columns-3 {
width: 25.66%;
}
#property-comparison-table .comparison-data.columns-4 {
width: 19%;
}
#property-comparison-table .comparison-data .remove-property-from-comparison {
opacity: 0.75;
position: absolute;
top: 0;
right: 0;
height: 25px;
width: 25px;
line-height: 25px;
font-weight: 700;
color: #fff;
text-align: center;
background-color: rgba(0, 0, 0, 0.25);
}
#property-comparison-table .comparison-data .remove-property-from-comparison:hover {
opacity: 1;
cursor: pointer;
}
#property-comparison-table .comparison-data .remove-property-from-comparison::before {
content: "";
}
#property-comparison-table .comparison-main .property-title {
margin-bottom: 0;
}
#property-comparison-table .comparison-main .property-address {
font-size: 0.9em;
color: #999999;
}
#property-comparison-table .comparison-attributes {
margin-top: 30px;
}
#property-comparison-table .comparison-attributes .comparison-row {
font-size: 0.9em;
line-height: 2.5;
border-bottom: 1px solid #eeeeee;
}
#property-comparison-table .comparison-attributes .comparison-header {
font-weight: 700;
}
非常乾淨,非常感謝! –