www.ndtv.com – Text is cropped on “Auto” page

[softvision-oana-arbuzov]

URL: https://auto.ndtv.com/
Browser / Version: Firefox Mobile Nightly 56.0a1 (2017-06-14)
Operating System: LG G5 (Android 7.0) - Resolution 1440 x 2560 pixels (~554 ppi pixel density)
Problem type: Text is not visible

Steps to Reproduce

1. Navigate to: https://auto.ndtv.com/
2. Scroll down to “News” section and observe text.

Expected Behavior:
Text is fully visible.

Actual Behavior:
Text is cropped.

Note:

1. Also reproducible for “Expert Reviews” section.
2. Reproducible on Firefox 53.0.2 Release.
3. Not reproducible on Chrome (Mobile) 58.0.3029.83.
4. Screenshot attached.

Watchers:
@softvision-sergiulogigan
@softvision-oana-arbuzov

sv; country: in

From webcompat.com with ❤️

[softvision-oana-arbuzov]

This might be a duplicate of #866102

[karlcow]

So yes it's a kind of issue related to -webkit-line-clamp where they used a height to compensate.

As you can see if increase the box height artificially on one element.

<div class="flexgrid">
    <figure class="media-list__img flexgrid__cell img-wrap">
        <img src="https://i.ndtvimg.com/i/2017-06/bmw-5-series-plug-in-hybrid_250x143_51497879675.jpg"
            data-webp="https://i.ndtvimg.com/i/2017-06/bmw-5-series-plug-in-hybrid_250x143_51497879675.jpg"
            class="img-responsive js-defer" alt="Auto Supplier Magna To Manufacture BMW 5 Series Plug-In Hybrids"
            title="Auto Supplier Magna To Manufacture BMW 5 Series Plug-In Hybrids">
    </figure>
    <div class="media-list__content flexgrid__cell">
        <div class="media-list__title h__truncate" style="height: 42px;">Auto Supplier Magna To Manufacture BMW 5 Series
            Plug-In Hybrids</div>
    </div>
</div>

.h__truncate, .h__txt-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
}

.h__truncate {
	display: -webkit-box;
	position: relative;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.media-list__title {
	height: 32px;
	line-height: 1.2;
	font-size: 1.4rem;
}

.media-list--news .media-list__title {
	max-height: 50px;
	-webkit-line-clamp: 3;
}

[karlcow]

duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=866102