Long movie overview overlap on Safari browser

[jelum 31]

Hi,

A long movie overview overlapped itself on Safari 16.4 (18615.1.26.110.1) and Emby for iOS 2.2.7.

Emby version 4.7.11.0.

Chrome, Firefox, and Edge are working fine.

By the Stackoverflow the fix is (stackoverflow.com/questions/32689686/overlapping-css-flexbox-items-in-safari

The element is shrinking. You need to set the flex-shrink property to 0 on the shrinking element.

main >div:first-child {
  -webkit-flex: 0;
  flex-shrink: 0;
}

Any chance to fix this in a stable version?

 

https://user-images.githubusercontent.com/1758718/236544316-7ff52e51-edde-4d73-ad23-2706ed919ad8.png

https://user-images.githubusercontent.com/1758718/236601868-ee282b49-be4d-46c9-ae2c-4e7a069943e3.PNG

[Luke 39655]

Hi, can you please show a screenshot example? Thanks.

[jelum 31]

sorry, in preview mode pictures were shown as pictures and not as links. attached

1.png - Safari 16.4 (18615.1.26.110.1)

2.png - Emby for iOS 2.2.7

[Luke 39655]

Hi, that’s strange. From the metadata editor can you copy the raw overview text, then paste it into a plain text file and then attach that file here? Thanks.

[CptGpeG 1]

Hi Like, 

I'm attaching two files: 

EmbySafariUL.txt - raw text from movie metadata

TheNinthGate.webarchive - rendered page code 

[CptGpeG 1]

* Luke, of course. 

Haven't noticed auto-replacement. 

[Luke 39655]

Actually this is a tough one. What created this markup? You might just have to clean it up manually.

I can fix this by html encoding the overview contents for display, but if I do that, then a lot of users will be unhappy about that, so I'd like to avoid that.

[jelum 31]

1 minute ago, Luke said:

Actually this is a tough one. What created this markup? You might just have to clean it up manually.

I can fix this by html encoding the overview contents for display, but if I do that, then a lot of users will be unhappy about that, so I'd like to avoid that.

In other words, it calculates the length of the "clear" text, excluding text in tags, correct?

If I want to add a list of interesting facts to the overview I shouldn't use a tag for this, correct?

[Luke 39655]

Normally br tags for line breaks are ok. 

To be honest this is the first time I’ve seen this happen and it’s only a problem on Apple, not Android or windows. We’re supposed to be restricting the size of the overview container but for some reason it’s not happening with this particular text.

 Oddly it’s still a problem even when I replace the li tags with plain divs.

 The only thing that fixes it for sure is html encoding but like I said, a lot of people are going to complain if I do that.

[jelum 31]

3 minutes ago, Luke said:

The only thing that fixes it for sure is html encoding but like I said, a lot of people are going to complain if I do that.

What do you mean "html encoding"? If I understand you correctly, it will print all tags as plain text, which I don't want - I expect to see a list.

If I'm wrong - can I use html encoding by myself for the Overview field? Using HttpUtility.HtmlEncode(overview) gave me the below result (incorrect):

Spoiler

Дин Корсо, один из лучших специалистов по поиску,оценке и скупке раритетных изданий, принимает от владельца крупнейшей в мире библиотеки оккультных книг необычный, но крайне выгодный заказ: определить подлинность венца собрания, фолианта XVII века под названием «Девять врат в царство призраков», с помощью которого, по преданию, можно вызвать самого Люцифера. Ему предстоит полное опасностей и тайн путешествие по Европе. Но только тогда, когда на пути к разгадке тайны «Девятых врат» начинают попадаться трупы тех, с кем Дин Корсо встречался совсем недавно, ему открывается зловещая правда. Он понимает, что в этой дьявольской игре на кон поставлена не только жизнь его, но и душа...<br/><br/><b>Интересное:</b><ul><li>Фильм снят по мотивам романа Артуро Перес-Реверте «Клуб Дюма, или Тень Ришельё» (El club Dumas o la sombra de Richelieu, 1993).</li><li>Имя главного героя было изменено. В романе Реверте его зовут Лукас Корсо. В картине Поланского он стал Дином Корсо.</li><li>В романе Лиана Теллфер — эффектная блондинка с пышными формами. Актриса Лена Олин — худощавая брюнетка, явно не соответствует книжному оригиналу.</li><li>В романе наниматель Корсо — Варо Борха, а не Борис Балкан, ставший им в фильме.</li><li>Для Романа Поланского «Девятые врата» стали первой картиной в жанре мистического триллера со времён его шедеврального «Ребёнка Розмари».</li><li>Книга Реверте не является мистикой, а фильм же снят в жанре мистического триллера.</li><li>На съемках фильма Джонни познакомился с <a href="/name/42920/" class="all">Ванессой Паради</a>, будущей гражданской женой и матерью его двоих детей.</li><li>В фильме часто фигурирует число дьявола 666. В частности в 1666 г была написана книга «Девять врат в царство теней», 666 – код в лифте Пентхауза Болкана и в его частной библиотеке.</li><li>Ручка, которой пишет Корсо, — это ограниченный коллекционный выпуск шариковой ручки «Монблан Агата Кристи». </li><li>Сигареты, которые курит Лиана Тельфер, называются «Черные дьяволы».</li><li>Дин Корсо курит сигареты фирмы «Lucky Strike».</li></ul>

 

[Luke 39655]

Correct. That fixes it but I’d like to avoid that. I would try doing your list with basic line breaks instead.

[jelum 31]

this is (encoding) not what I'm expected to present, so would use line breaks with nbsp and *.

thanks

[jelum 31]

@CptGpeG, you'll need to refresh the metadata of all videos with an overlapped overview after plugin update