Friday, 20 December 2024

LinkedIn - Ellipsis Bug

Firefox users might have recently noticed that LinkedIn profiles display an ellipsis ("…") but do not allow the text to expand when clicked.

, whereas Chrome users encounter no such issue.


Firefox: About section


Firefox: Experience section


Chrome: About section


Chrome: Experience section


Example of Minimal Code:

<html lang="en">
<head>
    <style>
        .ZPcJ {
            position: relative;
        }

        .inline-show-more-text--is-collapsed-with-line-clamp {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }

        .inline-show-more-text__link-container-collapsed {
            position: absolute;
            bottom: 0;
            right: 0;
            margin: 0;
            padding: 0 0 0 0.4rem;
        }
    </style>
</head>
<body>
    <div class="ZPcJ">
        <div class="inline-show-more-text--is-collapsed-with-line-clamp">
            Proficient Equipped with hands-on experience gained through managing diverse projects during my professional and academic journey, I bring a harmonious balance of analytical thinking, creativity, and resourcefulness to the table.
            Motivated by a passion for innovation, I approach every endeavor with determination and a focus on achieving impactful results. From designing scalable architectures to optimizing workflows, I continuously seek opportunities to refine my skills and explore uncharted solutions.
            <button type="button" class="inline-show-more-text__link-container-collapsed">
                …see more
            </button>
        </div>
    </div>
</body>
</html>

Output:

Chrome always shows the button

Firefox


When the "…see more" button is wrapped inside the same div as the clamped text, the button becomes overlaid and inaccessible.

Chrome is able to display the button, while Firefox does not render it.

A Firefox developer claimed it's a bug in LinkedIn because not rendering the element is the correct behavior per the specifications:



Firefox Nightly 135 has already implemented a short-term fix:


Part of the code fix rolls back the pre-21 Oct behavior by adding a pref: