m.blog.naver.com - design is broken

[webcompat-bot]

URL: https://m.blog.naver.com/PostView.nhn?blogId=sorkelf&logNo=220846504837&proxyReferer=&proxyReferer=http%3A%2F%2Fblog.naver.com%2Fsorkelf%2F220846504837

Browser / Version: Firefox Mobile 65.0
Operating System: Android
Tested Another Browser: Yes

Problem type: Design is broken
Description: title was displayed while scrolling down
Steps to Reproduce:
Scroll down

Browser Configuration

• mixed active content blocked: false
• image.mem.shared: true
• buildID: 20181129095546
• tracking content blocked: false
• gfx.webrender.blob-images: true
• hasTouchScreen: true
• mixed passive content blocked: false
• gfx.webrender.enabled: false
• gfx.webrender.all: false
• channel: nightly

Console Messages:

[u'[console.warn(    .\n\txhr-timout) https://ssl.pstatic.net/t.static.blog/nmobile/versioning/LegoCommonJS-1912673157_https.js:1:6855]', u'[JavaScript Warning: "https://gfp.veta.naver.com/adcall?u=m_blog_top&p=da_dom_id%3Assp-top%2Cbid%3Asorkelf%2Cpid%3A220846504837%2CpublisherRequest%3AN%2Ccnt%3A1%2Cpt%3A%25EB%2582%2598%25EB%259D%25BC%25EA%25BC%25B4%25EC%259D%25B4%25EB%25A7%2590%25EC%259D%25B4%25EC%2595%2584%25EB%258B%2588%25EA%25B5%25AC%25EB%25A7%258C..%252C%25EC%258A%25AC%25EC%258A%25AC%25EC%2595%2595%25EB%25B0%2595%25EC%259D%25B4%25EC%2598%25A8%25EB%258B%25A4..%2Cpc%3ADirectX%252011%2CsessionId%3ADDF12D53157357819EEC9EF88DEFD8D8.jvm1&yob=&g=&ct=&cb=spwp.getMediationList&r=http%3A%2F%2Fblog.naver.com%2Fsorkelf%2F220846504837&c=https%3A%2F%2Fm.blog.naver.com%2FPostView.nhn%3FblogId%3Dsorkelf%26logNo%3D220846504837%26proxyReferer%3D%26proxyReferer%3Dhttp%253A%252F%252Fblog.naver.com%252Fsorkelf%252F220846504837&rui=69229225289382424  <script>  ." {file: "https://m.blog.naver.com/PostView.nhn?blogId=sorkelf&logNo=220846504837&proxyReferer=&proxyReferer=http%3A%2F%2Fblog.naver.com%2Fsorkelf%2F220846504837" line: 1}]', u'[JavaScript Warning: "https://gfp.veta.naver.com/adcall?u=m_blog_bottom&p=da_dom_id%3Assp-bottom%2Cbid%3Asorkelf%2Cpid%3A220846504837%2CpublisherRequest%3AN%2Ccnt%3A1%2Cpt%3A%25EB%2582%2598%25EB%259D%25BC%25EA%25BC%25B4%25EC%259D%25B4%25EB%25A7%2590%25EC%259D%25B4%25EC%2595%2584%25EB%258B%2588%25EA%25B5%25AC%25EB%25A7%258C..%252C%25EC%258A%25AC%25EC%258A%25AC%25EC%2595%2595%25EB%25B0%2595%25EC%259D%25B4%25EC%2598%25A8%25EB%258B%25A4..%2Cpc%3ADirectX%252011%2CsessionId%3ADDF12D53157357819EEC9EF88DEFD8D8.jvm1&yob=&g=&ct=&cb=spwp.getMediationList&r=http%3A%2F%2Fblog.naver.com%2Fsorkelf%2F220846504837&c=https%3A%2F%2Fm.blog.naver.com%2FPostView.nhn%3FblogId%3Dsorkelf%26logNo%3D220846504837%26proxyReferer%3D%26proxyReferer%3Dhttp%253A%252F%252Fblog.naver.com%252Fsorkelf%252F220846504837&rui=22304743042894172  <script>  ." {file: "https://m.blog.naver.com/PostView.nhn?blogId=sorkelf&logNo=220846504837&proxyReferer=&proxyReferer=http%3A%2F%2Fblog.naver.com%2Fsorkelf%2F220846504837" line: 1}]', u'[JavaScript Warning: "https://ssl.pstatic.net/adimg3.search/adpost/js/ad.js  <script>  ." {file: "https://m.blog.naver.com/PostView.nhn?blogId=sorkelf&logNo=220846504837&proxyReferer=&proxyReferer=http%3A%2F%2Fblog.naver.com%2Fsorkelf%2F220846504837" line: 1}]']

From webcompat.com with ❤️

[haseebgit]

Thanks for reporting. It is indeed reproducible. Moving to diagnosis.

Testing Environment
Firefox 65.0, Chrome 70.0, Android 8.1

[wisniewskit]

This site is relying on non-standard or non-interoperable Webkit-isms that Firefox doesn't yet support to get the effect they want in their titlebar.

They are forcing their blog's title text to wrap onto multiple lines with word-break: break-all, and then hiding the extra lines with the non-standard combo of -webkit-line-clamp: 1; box-orient: vertical. But `-webkit-line-clamp isn't supported by Firefox yet, so that's why we see these extra lines floating around.

Thankfully, this is easy enough to fix: just change the title's element to a regular inline-block, and make it's container a grid instead of using non-standard stuff. The only other caveat is that they will also have to add white-space: nowrap for the ellipses to show (this is normally required for ellipses, but the line-slamp/box-orient combo also mysteriously makes them appear in Webkit).

So the minimal modifications would be adding these CSS rules, though they could also clean out the non-standard -webkit-line-clamp and -webkit-box-orient rules:

.Ngnb_service .gnb_title a {
  display: grid;
}
.ell {
  display: inline-block;
  white-space: nowrap;
}

Note that I don't have an iOS device to test with, but this change is working fine on Chrome and Firefox, and I don't see why Safari wouldn't support it (it has supported grid since version 10.3, even on iOS).

[Taegeonlee]

https://github.com/naver

[adamopenweb]

We are reaching out to this site in #22965. So I'm going to set this issue as Sitewait until we hear back.

[heycam]

This looks fixed to me, now that we support -webkit-line-clamp.

[cipriansv]

After retesting the issue I confirm that the issue has been fixed.

Tested with:
Browser / Version: Firefox Nightly 68.0a1 (2019-06-24), Firefox Fenix (Preview) 1.0.1926
Operating System: Huawei P10 (Android 8.0) - 1080 x 1920 pixels (~432 ppi pixel density)

[lock]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue at https://webcompat.com/issues/new if you are experiencing a similar problem.