Как решить проблему сотрясения параллакса? на Shopify ⇐ Html

Программисты Html
Ответить
Anonymous
 Как решить проблему сотрясения параллакса? на Shopify

Сообщение Anonymous »

Я только что создал новый раздел под названием Parallax Banner. После настройки я проверил это - все работает гладко на хроме, никаких проблем вообще. Но когда я пробую это на сафари, эффект становится шатким. Я даже использовал ИИ, чтобы найти причину проблемы, но все еще нет решения. Я также проверил его на нескольких устройствах, используя Safari, и проблема остается прежней. 😊
https://go.screenpal.com/watch/ctex1hn1gpp
{% style %}
.parallax-banner-{{ section.id }} {
position: relative;
min-height: {{ section.settings.desktop_min_height }}px;
max-height: {{ section.settings.desktop_max_height }}px;
height: {{ section.settings.desktop_height }}px;
width: {% if section.settings.full_width %}100vw{% else %}{{ section.settings.desktop_width }}px{% endif %};
margin: {% if section.settings.full_width %}0 calc(-50vw + 50%){% else %}0 auto{% endif %};
background-image: url('{{ section.settings.background_image | img_url: 'master' }}');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
align-items: center;
overflow: hidden;
}

.banner-content-{{ section.id }} {
position: relative;
z-index: 2;
width: 100%;
padding: 20px;
}

.banner-content-wrapper-{{ section.id }} {
{% case section.settings.content_position %}
{% when 'left' %}
margin-right: auto;
text-align: left;
{% when 'center' %}
margin: 0 auto;
text-align: center;
{% when 'right' %}
margin-left: auto;
text-align: right;
{% endcase %}
max-width: {{ section.settings.content_width }}px;
}

.heading-{{ section.id }} {
{% if section.settings.heading_type == 'text' %}
color: {{ section.settings.heading_color }};
font-size: {{ section.settings.heading_size }}px;
line-height: 1.2;
margin-bottom: {{ section.settings.heading_spacing }}px;
{% endif %}
}

.heading-image-{{ section.id }} {
{% if section.settings.heading_type == 'image' %}
width: {{ section.settings.heading_image_width }}px;
height: auto;
margin-bottom: {{ section.settings.heading_spacing }}px;
{% case section.settings.content_position %}
{% when 'left' %}
margin-right: auto;
{% when 'center' %}
margin: 0 auto {{ section.settings.heading_spacing }}px auto;
{% when 'right' %}
margin-left: auto;
{% endcase %}
{% endif %}
}

.subheading-{{ section.id }} {
{% if section.settings.subheading_type == 'text' %}
color: {{ section.settings.subheading_color }};
font-size: {{ section.settings.subheading_size }}px;
line-height: 1.4;
{% endif %}
}

.subheading-image-{{ section.id }} {
{% if section.settings.subheading_type == 'image' %}
width: {{ section.settings.subheading_image_width }}px;
height: auto;
{% case section.settings.content_position %}
{% when 'left' %}
margin-right: auto;
{% when 'center' %}
margin: 0 auto;
{% when 'right' %}
margin-left: auto;
{% endcase %}
{% endif %}
}

@media screen and (max-width: 768px) {
.parallax-banner-{{ section.id }} {
min-height: {{ section.settings.mobile_min_height }}px;
max-height: {{ section.settings.mobile_max_height }}px;
height: {{ section.settings.mobile_height }}px;
width: {% if section.settings.full_width %}100vw{% else %}{{ section.settings.mobile_width }}px{% endif %};
background-attachment: scroll;
}

.heading-{{ section.id }} {
{% if section.settings.heading_type == 'text' %}
font-size: {{ section.settings.mobile_heading_size }}px;
{% endif %}
}

.heading-image-{{ section.id }} {
{% if section.settings.heading_type == 'image' %}
width: {{ section.settings.mobile_heading_image_width }}px;
{% endif %}
}

.subheading-{{ section.id }} {
{% if section.settings.subheading_type == 'text' %}
font-size: {{ section.settings.mobile_subheading_size }}px;
{% endif %}
}

.subheading-image-{{ section.id }} {
{% if section.settings.subheading_type == 'image' %}
width: {{ section.settings.mobile_subheading_image_width }}px;
{% endif %}
}
}
{% endstyle %}



{% if section.settings.heading_type == 'text' and section.settings.heading != blank %}
{{ section.settings.heading }}
{% elsif section.settings.heading_type == 'image' and section.settings.heading_image != blank %}
Изображение
alt="{{ section.settings.heading_image.alt | escape }}"
loading="lazy"
>
{% endif %}

{% if section.settings.subheading_type == 'text' and section.settings.subheading != blank %}
{{ section.settings.subheading }}
{% elsif section.settings.subheading_type == 'image' and section.settings.subheading_image != blank %}
Изображение
alt="{{ section.settings.subheading_image.alt | escape }}"
loading="lazy"
>
{% endif %}




{% schema %}
{
"name": "Parallax Banner v1",
"settings": [
{
"type": "header",
"content": "Background Settings"
},
{
"type": "image_picker",
"id": "background_image",
"label": "Background Image"
},
{
"type": "header",
"content": "Layout Settings"
},
{
"type": "checkbox",
"id": "full_width",
"label": "Full Width",
"default": true
},
{
"type": "select",
"id": "content_position",
"label": "Content Position",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
},
{
"type": "range",
"id": "content_width",
"min": 200,
"max": 1200,
"step": 50,
"unit": "px",
"label": "Content Width",
"default": 800
},
{
"type": "header",
"content": "Desktop Settings"
},
{
"type": "range",
"id": "desktop_width",
"min": 800,
"max": 1600,
"step": 50,
"unit": "px",
"label": "Width",
"default": 1200,
"info": "Applied when not full width"
},
{
"type": "range",
"id": "desktop_min_height",
"min": 100,
"max": 1000,
"step": 10,
"unit": "px",
"label": "Minimum Height",
"default": 300
},
{
"type": "range",
"id": "desktop_height",
"min": 200,
"max": 1000,
"step": 10,
"unit": "px",
"label": "Height",
"default": 500
},
{
"type": "range",
"id": "desktop_max_height",
"min": 100,
"max": 1100,
"step": 10,
"unit": "px",
"label": "Maximum Height",
"default": 800
},
{
"type": "header",
"content": "Mobile Settings"
},
{
"type": "range",
"id": "mobile_width",
"min": 300,
"max": 800,
"step": 50,
"unit": "px",
"label": "Width",
"default": 400,
"info": "Applied when not full width"
},
{
"type": "range",
"id": "mobile_min_height",
"min": 100,
"max": 800,
"step": 10,
"unit": "px",
"label": "Minimum Height",
"default": 200
},
{
"type": "range",
"id": "mobile_height",
"min": 200,
"max": 800,
"step": 10,
"unit": "px",
"label": "Height",
"default": 300
},
{
"type": "range",
"id": "mobile_max_height",
"min": 300,
"max": 1000,
"step": 10,
"unit": "px",
"label": "Maximum Height",
"default": 500
},
{
"type": "header",
"content": "Heading Settings"
},
{
"type": "select",
"id": "heading_type",
"label": "Heading Type",
"options": [
{
"value": "text",
"label": "Text"
},
{
"value": "image",
"label": "Image"
}
],
"default": "text"
},
{
"type": "text",
"id": "heading",
"label": "Heading Text"
},
{
"type": "color",
"id": "heading_color",
"label": "Heading Color",
"default": "#ffffff"
},
{
"type": "range",
"id": "heading_size",
"min": 20,
"max": 100,
"step": 2,
"unit": "px",
"label": "Heading Text Size (Desktop)",
"default": 48
},
{
"type": "range",
"id": "mobile_heading_size",
"min": 16,
"max": 60,
"step": 2,
"unit": "px",
"label": "Heading Text Size (Mobile)",
"default": 32
},
{
"type": "image_picker",
"id": "heading_image",
"label": "Heading Image"
},
{
"type": "range",
"id": "heading_image_width",
"min": 50,
"max": 800,
"step": 10,
"unit": "px",
"label": "Heading Image Width (Desktop)",
"default": 400
},
{
"type": "range",
"id": "mobile_heading_image_width",
"min": 50,
"max": 400,
"step": 10,
"unit": "px",
"label": "Heading Image Width (Mobile)",
"default": 200
},
{
"type": "range",
"id": "heading_spacing",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"label": "Space After Heading",
"default": 20
},
{
"type": "header",
"content": "Subheading Settings"
},
{
"type": "select",
"id": "subheading_type",
"label": "Subheading Type",
"options": [
{
"value": "text",
"label": "Text"
},
{
"value": "image",
"label": "Image"
}
],
"default": "text"
},
{
"type": "text",
"id": "subheading",
"label": "Subheading Text"
},
{
"type": "color",
"id": "subheading_color",
"label": "Subheading Color",
"default": "#ffffff"
},
{
"type": "range",
"id": "subheading_size",
"min": 14,
"max": 60,
"step": 2,
"unit": "px",
"label": "Subheading Text Size (Desktop)",
"default": 24
},
{
"type": "range",
"id": "mobile_subheading_size",
"min": 12,
"max": 40,
"step": 2,
"unit": "px",
"label": "Subheading Text Size (Mobile)",
"default": 18
},
{
"type": "image_picker",
"id": "subheading_image",
"label": "Subheading Image"
},
{
"type": "range",
"id": "subheading_image_width",
"min": 50,
"max": 800,
"step": 10,
"unit": "px",
"label": "Subheading Image Width (Desktop)",
"default": 300
},
{
"type": "range",
"id": "mobile_subheading_image_width",
"min": 50,
"max": 400,
"step": 10,
"unit": "px",
"label": "Subheading Image Width (Mobile)",
"default": 150
}
],
"presets": [
{
"name": "Parallax Banner v1",
"category": "Banner"
}
]
}
{% endschema %}



Подробнее здесь: https://stackoverflow.com/questions/794 ... on-shopify
Вернуться к началу
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Html»