Core Dark: Non-Inserted Thumbnails Blurry for iPhone Users

[MarcusMoon]

I've installed the Core Dark theme on my live board and two of my users have reported blurry, full-screen thumbnails when viewing Non-Inserted thumbnails their iPhones. I own and Android, so I can't duplicate the problem. I switched back to my old theme and they said the problem went away. Here are the screenshots one of them uploaded to compare between my old theme and Core Dark:

Blurry Thumbnail


Non-Blurry Thumbnail

 

[MarcusMoon]

One of my Android phone users just reported the same issue.

 

[Russ]

We don't touch the attachments at all. This is our default Core Dark style:

Do you have any edits in extra.less that might be causing it? I've seen some clients in the past change like the max-width of images in the post which could potentially cause this.

Does it do it on the parent Core Dark style for you as well? The one there you don't place edits in.

 

[MarcusMoon]

Do you have any edits in extra.less that might be causing it?

None of my edits address attachments. They just remove the board title from the forum index, re-color certain aspects of content areas, and add a spacer between sticky and regular posts:

[data-template = "forum_list"]
{
.p-title-value
{
visibility: hidden;
}
}

[data-template="forum_list"][data-logged-in="false"]
{
.p-title-pageAction .button--icon--bolt
{
display: none;
}
}

.bbWrapper a.bbCodeBlock-sourceJump
{ color: orange;
text-decoration: none;
}

.fr-element a, .bbWrapper a
{
color: #a6dcff;
}

label.iconic > input + i:after
{
color: #a6dcff;
}

.fr-view blockquote[data-quote]:before
{
color: #a6dcff;
}

.bbCodeBlock {
border-left: 3px solid orange;
}

.fr-view blockquote[data-quote]:before {
color: orange;
}

.fr-view blockquote {
border-left: 3px solid orange;
}

.tooltip.tooltip--selectToQuote .tooltip-content
{
background: #4979b8;
.tooltip-arrow
{
border-bottom-color: #4979b8;
}
a
{
background-color: #4979b8;
color: #fff;
padding: 5px 10px;
border-radius: @xf-borderRadiusMedium;
border: 1px solid #6084b4;
}
}

.fr-element a, .bbWrapper a {
color: #a6dcff
}

/* Border between sticky/normal threads */
.structItemContainer-group--sticky {
border-bottom: 6px solid;
color: xf-diminish(@xf-paletteColor1, 6%);
}

 

[Russ]

And what about the parent style? Does it happen there as well?

 

[MarcusMoon]

I just installed the parent style, with no customization, and had one of them test the issue. My test attachment is blurry and full-size on it, too.

 

[Russ]

To help further, I'll need an admin account to debug it as this hasn't been reported at all. Please create a ticket:

https://pixelexit.com/link-forums/new-ticket.81/

Do not respond here as it's a public area.

Here is a guide on configuring an admin account for our use:

Admin account

Setting up an admin account

pixelexit.com

 

[MarcusMoon]

Problem solved!

Thanks!

 

[Russ]

This is sort of a "bug" in Core. We add extra spacing for Core messages which makes thumbnails become larger sooner than normal. This will be fixed in our next release. If anyone else experiences this, you can add this to your extra.less:

@media (max-width: @xf-responsiveNarrow)
{

.block--messages article.message
{
    padding: 0;
    .message-header .message-attribution
    {
    border-radius: 0;
    }
}
}