m.milliyet.com.tr - Navigation arrow for the slider (chevron) is distorted

[rsssxd]

URL: https://m.milliyet.com.tr/

Browser / Version: Mozilla/5.0 (Android 11; Mobile; rv:91.0) Gecko/91.0 Firefox/91.0
Operating System: Android 11
Tested Another Browser: Yes Chrome

Problem type: Design is broken
Description: Öğeler yanlış hizalanmış
Steps to Reproduce:
Items are incorrectly loading and corrupt characters

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[rsssxd]

Chromium SS

[softvision-raul-bucata]

@reyis4402
We appreciate your report. I was able to reproduce the issue. The navigation arrow for the slider is distorted:

Tested with:
Browser / Version: Firefox Nightly 91.0a1 (2015816947 -🦎91.0a1-20210617153900🦎)/ Chrome Mobile Version 91.0.4472.101
Operating System: Samsung A51 (Android 11) -1080 × 2400 pixels 20:9 aspect ratio (~405 ppi density)

Notes:

1. Reproducible regardless of the status of ETP
2. Reproducible on the latest build of Firefox Nightly
3. Works as expected using Chrome:
   

Moving this to NeedsDiagnosis for further investigations.

[wisniewskit]

To draw the arrows the page is using CSS ::after to create a box with a white border on its right and bottom, and then they are rotating it 45 degrees. They then size it by giving it padding:6px. It's inside a flexbox.

It ends up having a square shape normally, but they also apply white-space:pre to it, which seems to trigger Firefox to make the box taller (presumably based on its font-size). Perhaps Firefox is adding a line box where it should not be doing so, given that the element has content:''? I've filed bz1731120 to find out.

In the meantime this can be fixed by resetting the whitespace rule:

.mobile-main-slider .swiper-button-next::after, .mobile-main-slider .swiper-button-prev::after {
	white-space: normal;
}

[webcompat-bot]

Generate outreach template

[wisniewskit]

A fix for this has landed on Firefox nightly builds, and should be rolled out to all users by Firefox 95. I don't think we'll need to take any extra action.