В нашем новом дизайне веб-сайта есть элемент, который помещает хэштеги в кривую, сгенерированную с помощью textpath svg.
Код разработки, написанный ниже, отлично работает во всех наших тестовых браузерах (Firefox, Chrome, Edge).
<div class="hashtags2 xp">
<svg viewbox="0 0 100 25">
<path fill="transparent" id="curve" d="M0 30 V12 Q30 17 55 12 T100 11 V30" />
<text>
<textpath text-anchor="middle" startoffset="50%" xlink:href="#curve">#PedalersKnowsBhutan #BicycleBhutan #ExperienceBhutan #HikeBhutan #DiscoverWithPedalers</textpath>
</text>
</svg>
</div>
Но когда мы конвертируем дизайн в шаблон и запускаем его в процессе сборки CMS (MODX), приведенная ниже минимизированная версия больше не отображает текст при просмотре в Firefox (Chrome и Edge по-прежнему показываютэто прекрасно).
<div class="hashtags2 xp"><svg viewbox="0 0 100 25"><path fill="transparent" id="curve" d="M0 30 V12 Q30 17 55 12 T100 11 V30" /><text><textpath text-anchor="middle" startoffset="50%" xlink:href="#curve">#PedalersKnowsBhutan #BicycleBhutan #ExperienceBhutan #HikeBhutan #DiscoverWithPedalers</textpath></text></svg></div>
Единственная разница между двумя версиями заключается в отсутствии разрывов строк.
CSS в соответствии с запросом.
.hashtags2 {
z-index: 15;
font-size: 0.15vw;
position: absolute;
bottom: -34rem;
left: 0;
fill: #fff;
width: 100%;
}
.xp { display: block; }
Есть лиспособ избежать этой причуды с Firefox?
Страница разработки, которая правильно отображается в Firefox, Chrome, Edge и Opera: https://pedalers.travel/sandbox/tours-v2018.7.4.4.htm
Страница сборки CMS, которая правильно отображается в Chrome,Edge и Opera, но не в Firefox https://pedalers.travel/sandbox/test-page.htm
Хэштеги, о которых идет речь, находятся в нижнем колонтитуле.